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

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

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

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

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

ブロックレベル要素

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

isplay:block;

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

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

isplay:inline;

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

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

isplay:inline-block;