ブロックレベル要素とインライン要素

css

HTML5ではブロックレベル要素とインライン要素という分類は廃止になりました。 しかしCSSでのdisplayプロパティの状態としては残っています。
つまり文書構造としての役割はなくなりましたが、装飾としての役割は残っている訳です。

各要素にはdisplayプロパティの初期値が設定されており、CSSのdisplayプロパティで変更が可能です。
代表的なのはblockとinlineですが、他にもblock-inlineやtableなどの値もあります。

display:block; /*ブロック*/
display:inline; /*インライン*/

これらの違いについて確認しておきましょう。

ブロックレベル要素

ブロックレベル要素は一つのブロックとして扱われ、縦に並ぶのが特徴です。

display:block;

特徴

代表的な要素

p要素、h1要素、div要素など

インライン要素

インライン要素はブロックレベル要素に内包される要素で、横に並ぶのが特徴です。

display:inline;

特徴

代表的な要素

a要素、span要素、br要素など

インラインブロック要素

displayの値でよく使うのが、blockとinlineの混合型であるinline-blockです。
高さを指定できるinline要素といった体で、グローバルメニューなどによく使われます。

display:inline-block;

特徴

アマルウェブ HOME