CSSのdisplayプロパティのinline,block,inline-blockの違いとその解説
display:inlineの場合
a、span、imgタグ等の初期値。ブロックボックス要素の子要素として配置する。
幅、高さの指定はできない（文字の長さ等で決まる）。左右のpaddingとmarginの指定は可能。
display:inline １個目div
brで改行した
brで改行した
display:inline ２個目div
brで改行した
brで改行した
display:blockの場合
p、div、ul、h1～h6、hrタグ等の初期値。
要素が縦に並ぶ(要素の終了タグ位置で改行が入る)。幅、高さが指定できる。
上下左右のpaddingとmarginの指定が可能。
display:block １個目div
brで改行
brで改行
display:block ２個目div
brで改行
brで改行
display:inline-blockの場合
要素の並び方はインラインボックス（要素が横に並ぶ[要素の終了タグ位置で改行が入らない]）だが、内部はブロックボックスで高さ・横幅などを指定できる。
上下左右のpaddingとmarginの指定が可能。
ナビゲーションバー等でボタンを横並びにする場合に使用する。(display:flexを使用するのもあり)
display:inline-block １個目div
brで改行
brで改行
display:inline-block ２個目div
brで改行
brで改行