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

CSSで色を付ける以外何もしないで<div>と<span>の挙動を見てみましょう。

CSSでは display: inline; や display: block; を使えば、要素の表示方法を自由に変更できます。

サンプル写真

左右に並べた要素（インラインブロック）

• テキストが入ります
• テキストが入ります
• テキストが入ります

• 見出し

  本文が入ります。内容が長くても自動で折り返されます。

• 見出し

  本文が入ります。本文が続きます。

display: block; と display: inline; のまとめ

ブロックレベル

独自の行を占有し、幅や高さ、上下左右のマージン・パディングが適用されます。

インライン

同じ行に並び、幅や高さは無視されます。上下マージンは効かず、左右マージンだけ適用されます。