要素の表示形式であるブロック・インライン・インラインブロックの違いについて紹介します。
基礎知識について
HTMLタグごとにデフォルトの表示形式が決まっている
HTMLタグごとにデフォルトの表示形式が決まっており、ブロックレベル要素あるいはインライン要素のいずれかになります。
ブロックレべル要素の表示形式がデフォルトのタグは例えばp、div、ul、h1~h6などです。1 インライン要素の表示形式がデフォルトのタグは例えばa、span、imgなどです。2
CSSのdisplayプロパティで表示形式を変更できる
表示形式はdisplayプロパティで変更できます。displayで指定できる主な値は以下の通りです。
- inline
- block
- inline-block
- none
たとえばdisplay: blockを付与するとブロックレベル要素が作成できます。
displayで指定できる値の一覧はMDN Web Docs『display』をご覧ください。
参考: HTML5でブロックレベル要素・インライン要素という分類方法が廃止された
HTMLタグをブロックレベル要素とインライン要素に分類する考えはHTML 4.01までのものです。HTML5からはコンテンツカテゴリという概念をもとにHTMLタグを分類するようになりました。1 なお、あくまで分類方法のはなしであるため、HTML5でもブロックレベル要素とインライン要素の機能自体は存在します。
ブロック・インライン・インラインブロックの違いまとめ
ブロック・インライン・インラインブロックの違いを表にまとめると以下のようになります。
| ブロック | インライン | インラインブロック | |
|---|---|---|---|
| 並ぶ方向 | たて | よこ | たて |
| 横幅・高さの指定 | できる | できない | できる |
| paddingの指定 | できる | できる(上下は要素が重なる) | できる |
| marginの指定 | できる | 左右のみできる | できる |
| text(vertical)-alignの適用 | できない | できる | できる |
ブロックレベル要素について
ブロックレベル要素は縦に並ぶ
ブロックレベル要素は縦に並びます。
See the Pen block-lines by Toshiharu Nishina (@nishina555) on CodePen.
横幅・高さの指定ができる
ブロックレベル要素は横幅・高さの指定ができます。
See the Pen block-size by Toshiharu Nishina (@nishina555) on CodePen.
横幅の指定がない場合、横幅は親要素の横幅と同じになります。高さの指定がない場合、高さは要素内のコンテンツが収まる長さとなります。
See the Pen Untitled by Toshiharu Nishina (@nishina555) on CodePen.
paddingの指定ができる
ブロックレベル要素は上下左右paddingが指定できます。
See the Pen Untitled by Toshiharu Nishina (@nishina555) on CodePen.
marginの指定ができる
ブロックレベル要素は上下左右marginが指定できます。
See the Pen block-margin by Toshiharu Nishina (@nishina555) on CodePen.
text-align/vertical-alignを適用できない
ブロックレベル要素の位置はtext-align/vertical-alignで調整できません。
See the Pen block-align by Toshiharu Nishina (@nishina555) on CodePen.
調整できるのはtext-alignによるブロックレベル要素内のテキストのみです。See the Pen block-text-align by Toshiharu Nishina (@nishina555) on CodePen.
インライン要素について
インライン要素は横に並ぶ
インライン要素は横に並びます。
See the Pen inline-lines by Toshiharu Nishina (@nishina555) on CodePen.
横幅・高さの指定ができない
インライン要素は横幅・高さの調整ができず、要素内のコンテンツが収まる大きさに自動で調整されます。
paddingの指定は左右可能、上下も可能だが要素が重なる
インライン要素は上下左右paddingが指定できます。
上下のpaddingは指定こそできますが、要素が重なってしまうため取り扱いには注意が必要です。
See the Pen inl by Toshiharu Nishina (@nishina555) on CodePen.
text-alignによる位置の調整ができる
インライン要素の親要素にtext-alignを適用することでインライン要素の水平方向の位置を調整できます。
See the Pen inline-text-align by Toshiharu Nishina (@nishina555) on CodePen.
vertical-alignによる位置の調整ができる
インライン要素にvertical-alignを適用することでインライン要素の垂直方向の位置を調整できます。
See the Pen inline-vertical-align by Toshiharu Nishina (@nishina555) on CodePen.
注意: 勝手に余白がついてしまうケースがある
インライン要素では意図していないマージンが発生するケースがあるので注意が必要です。
インライン要素で勝手にできる余白の削除方法の詳細解説は【CSS】インラインブロック/インラインで勝手にできる余白の削除方法で紹介しています。
インラインブロックについて
インラインブロックはブロックレベル要素とインライン要素の両方の性質を兼ね備えた表示形式です。
インラインブロックのイメージは『横に並ぶブロックレベル要素』です。
インラインブロックは横に並ぶ
インライン要素と同じく横に並びます。
See the Pen inline-block-lines by Toshiharu Nishina (@nishina555) on CodePen.
横幅・高さの指定ができる
ブロックレベル要素と同じく横幅・高さの指定ができます。
See the Pen inline-block-size by Toshiharu Nishina (@nishina555) on CodePen.
paddingの指定ができる
ブロックレベル要素と同じく上下左右paddingが指定できます。
marginの指定ができる
ブロックレベル要素と同じく上下左右marginが指定できます。
text-align/vertical-alignによる位置の調整ができる
インライン要素と同じくはtext-align/vertical-alignによる位置の調整ができます。
インラインブロックの使いどころ
パンくずリストやメニューバーをはじめとした、『ブロックレベル要素が横に配置されたパーツを作成したいとき』にインラインブロックが活躍します。
注意: 勝手に余白がついてしまうケースがある
インラインブロックでは意図していないマージンが発生するケースがあるので注意が必要です。
インラインブロックで勝手にできる余白の削除方法の詳細解説は【CSS】インラインブロック/インラインで勝手にできる余白の削除方法で紹介しています。
さいごに
Twitter(@nishina555)やってます。フォローしてもらえるとうれしいです！