今回は、display:block、inline、inline-blockについてデモを使いながら解説していきたいと思います！
目次
[これで完璧に理解]display:block、inline、inline-blockについて
それでは、百聞は一見にしかずということで、
以下のデモをご覧ください！
See the Pen MWyBeJv by ryu (@ryu-no-sss) on CodePen.
まずは、1つ目のdisplay: block;から説明します。
display: block;
display: block;は、inlineと違い、
要素ごとに、改行されるのが特徴であり、
横幅に関しては、親要素（親要素がない場合は、ブラウザ幅）いっぱいに広がります。
ですので、デモの1つ目のブロックは、
p要素（テキストという文字）が改行されているのが見てわかります。
display: inline;
display: inline;は、blockと違い、
要素は、改行されないという特徴があります。
また、横幅と高さは、デモを見ていただけるとわかりますが、
変更することは出来ません。
これは困った、、、
しかし問題ありません！
これを解決してくれるのが、次に紹介するinline-blockです。
display: inline-block;
display: inline-block;は、blockとinlineを掛け合わせた特徴を持っています。
inline-blockの特徴として、
改行はされず、なおかつ横幅と高さを変更することができるという特徴があります。
こちらも、デモの3つ目のブロックを見ていただけるとわかりますが、
inline-blockのため、heightが反映されているのがわかります。
なので、要素を横並びにしたい！
そして要素の横幅と高さも変更したい！という方は、
inline-blockを使用しましょう。
まとめ
・display: block;は、『改行される、横幅と高さを変更できる』
・display: inline;は、『改行されない（要素が横並びになる）、横幅と高さの変更は出来ない』
・display: inline-block;は、『改行されない（要素が横並びになる）、横幅と高さを変更できる』
今回は、display:block、inline、inline-blockを解説しました。
他にも、実戦でよく使うCSSコードを以下のリンクの記事にまとめているので、ぜひ！
それでは、最後まで読んでいただきありがとうございました。
