HTMLにはブロック要素とインライン要素がありましたね👍
なにそれって方は、前の記事を参考にしてみてください😊
▶https://qiita.com/akari_0618/items/f3b6892932cb6080c905

①display:block

実際に制作していると、ここ要素変えたいなってときがあるとします！
そのときに使えるのが、こちらのプロバティです！
インライン要素をブロック要素に変えることができるものです👍

では、実際にみていきましょう！！

index.html

<a href="#">テスト</a>

style.css

a {
  background-color: aqua;
  border-radius: 30px;
  width: 40%;
}

これをブラウザ上でリロードしてみましょう！

おそらくwidthが効いていないのではないでしょうか。
インライン要素は文字の数分だけしか範囲が効かなかったですね。
ではではここにdisplay:block;を足してみましょう！

style.css

a {
  background-color: aqua;
  border-radius: 30px;
  display: block;
  width: 40%;
}

おお！変わりましたね👍
そんな感じです👌

②display:inline;

こちらは、先程とは反対でブロック要素をインライン要素に変えます！

index.html

<h1>今日は雨が降っています</h1>
<h2>外に出たくなかったです</h2>

今回もわかりやすいようにバックグラウンドカラーを足しました👍

ブロック要素なので横幅いっぱいに並んでいて、積み木のような形になっていますね！
ではこれらを、横並びにしていきたいと思います！

では、cssに次のように記入していきましょう！

style.css

h1 {
  background-color: blue;
  display: inline;
}

h2 {
  background-color: brown;
  display: inline;
}

これで、ブロック要素からインライン要素に変更することができました。

横並びになりましたね😊