ボックスモデル

これまで、我々はwidthについて議論してきた。だから、widthの大きな落とし穴である、ボックスモデルについてそろそろ話そう。要素のwidthを設定しても、実際の幅が設定した値より大きくなってしまう場合がある: 要素のborderとpaddingの値が、設定したwidthに加算されて引き延ばされてしまうんだ。以下の例を見てみよう。同じwidthを持つ二つの要素が結果的に異なるサイズで表示される。

.simple {
  width: 500px;
  margin: 20px auto;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border-width: 10px;
}

長い間、この問題の解決策は、計算をする事だけだった。CSSを書く人は、実際に設定したいwidthの値より、いつも少し小さめの値を指定するのだ。具体的には、paddingとborderの値を差し引いた値だ。ありがたいことに、君はもうそれをする必要はない...