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

①display:block

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

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

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

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

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

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

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

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

②display:inline;

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

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

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

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

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

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

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

横並びになりましたね😊