CSSのdisplayプロパティのinline,block,inline-blockの違い

CSSのdisplayプロパティのinline,block,inline-blockの違い


CSSのdisplayプロパティのinline,block,inline-blockの違いとその解説

display:inlineの場合

a、span、imgタグ等の初期値。ブロックボックス要素の子要素として配置する。
幅、高さの指定はできない(文字の長さ等で決まる)。左右のpaddingとmarginの指定は可能。
display:inline 1個目div
brで改行した
display:inline 2個目div
brで改行した



display:blockの場合

p、div、ul、h1~h6、hrタグ等の初期値。
要素が縦に並ぶ(要素の終了タグ位置で改行が入る)。幅、高さが指定できる。
上下左右のpaddingとmarginの指定が可能。
display:block 1個目div
brで改行
display:block 2個目div
brで改行


display:inline-blockの場合

要素の並び方はインラインボックス(要素が横に並ぶ[要素の終了タグ位置で改行が入らない])だが、内部はブロックボックスで高さ・横幅などを指定できる。
上下左右のpaddingとmarginの指定が可能。
ナビゲーションバー等でボタンを横並びにする場合に使用する。(display:flexを使用するのもあり)
display:inline-block 1個目div
brで改行
display:inline-block 2個目div
brで改行


Mam's WebSite