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

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

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

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

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

ブロックレベル要素

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

isplay:block;

特徴

• 縦に並ぶ
• widthとheightを指定できる
• 上下左右にmarginとpaddingを指定できる
• text-alignは要素の中身に適応される
• vertical-alignを指定できない

代表的な要素

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

インライン要素

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

isplay:inline;

特徴

• 横に並ぶ
• widthとheightを指定できない。（内容物がサイズになる）
• 左右にmargin・paddingを指定できる
• 上下のmargin・paddingが画面上に反映されない場合がある（他の要素などと相殺される）
• text-alignは指定できない（親のブロックレベル要素に指定する）
• vertical-alignを指定できる

代表的な要素

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

インラインブロック要素

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

isplay:inline-block;

特徴

• 横に並ぶ
• widthとheightを指定できる
• 上下左右にmargin・paddingを指定できる
• text-alignは指定できない（親のブロックレベル要素に指定する）
• vertical-alignを指定できる