ボックスモデル

ボックスに width: 200px、16px のパディング、2px の枠線を指定すると、既定では画面の横幅を 200 ではなく 236 ピクセル使います。

すべての要素はボックス

ページをレイアウトするために、ブラウザーはすべての要素を長方形に変えます。どのボックスにも、内側から外側へ四つの層があります。コンテンツ領域には文字や画像が入ります。パディングはボックスの内側、コンテンツと枠線のあいだの余白で、ボックスの背景色で塗られます。枠線（border）はパディングのまわりの線です。マージンは枠線の外側の余白で、ほかのボックスを押しのけます。マージンはいつも透明です。ブラウザーの開発者ツールで要素を調べると、ちょうどこの図が数値つきで表示されます。

四辺をまとめて書く一括指定

padding、margin、border-width には一つから四つの値を書けます。順番は上から時計回りです。padding: 16px は四辺すべてを指定します。padding: 8px 16px は上下を 8、左右を 16 にします。padding: 4px 8px 12px 16px は上、右、下、左の順に指定します。margin-top のように、一辺だけを指定することもできます。border: 2px solid #333 は太さ、スタイル、色をまとめて指定します。solid や dashed のようなスタイルがないと、枠線はまったく描かれません。

box-sizing：ほとんどの人が変える設定

既定では、width と height はコンテンツ領域の大きさだけを決め、パディングと枠線はその外に足されます。これが content-box モデルで、レイアウトがやりにくくなります。たとえば width: 50% のボックス二つにパディングを少しでもつけると、もう横に並びません。box-sizing: border-box にすると、幅にパディングと枠線がふくまれ、そのぶんコンテンツ領域が縮みます。多くのスタイルシートは、最初に *, *::before, *::after { box-sizing: border-box; } でこれをすべての要素に適用しています。

ブロックボックスとインラインボックス

ボックスのふるまいは display の値によって変わります。p、h1、section などのブロックボックスは、新しい行から始まり、入れ物の幅いっぱいに広がります。a、strong、span などのインラインボックスは、文字の行の中におさまります。width や height は効かず、上下のパディングやマージンもほかの行を押しのけません。display: inline-block はその中間です。ボックスは単語のように行の中に並びますが、幅、高さ、パディングは守られるので、小さなラベルやボタンに向いています。

相殺されるマージン

ほとんどの人が驚くルールが一つあります。あるブロックの下マージンが次のブロックの上マージンと接すると、二つは足し算されず、大きいほうが勝ちます。margin-bottom: 20px の段落のあとに margin-top: 30px の見出しが続くと、あいだは 50 ではなく 30 ピクセルになります。これをマージンの相殺といいます。通常フローのブロックどうしの上下のマージンだけで起こり、フレックスやグリッドの入れ物の中では起こりません。ブロックを横方向の中央に置くには、width か max-width を指定し、margin: 0 auto とします。左右の自動マージン二つが、あいている場所を等しく分け合います。