ボックスモデルとは？

ウェブデザインにおいて、HTML要素は一般的に「ボックスモデル」と呼ばれる仕組みに基づいています。
このボックスモデルには、要素がどのようにサイズ付けされ、配置されるかを定義する四つの主要な部分があります。

1. Content (コンテンツ)
   ボックスの実際の中身（テキストや画像など）。
2. Padding (パディング)
   コンテンツとボーダーの間に存在し、ボックスの内部空間を制御する。
3. Border (ボーダー)
   パディングとマージンの間に存在し、ボックスの境界を形成する。
4. Margin (マージン)
   ボックスとその他の要素との間の空白領域で、ボックスを周りの要素から分離する。

box-sizingプロパティの導入

box-sizingプロパティは、このボックスモデルの挙動を調整するために導入されました。
このプロパティは、特に要素の横幅や高さの計算に影響を与えます。

通常のボックスモデルでは、横幅や高さの計算にcontent + padding + borderが含まれます。
しかし、box-sizingプロパティを使用すると、contentだけが要素の実際のサイズに対応し、paddingとborderはこれに含まれません。

box-sizingプロパティの値

content-box (デフォルト)

要素の横幅と高さにpaddingとborderは含まれません。
これが通常のボックスモデルです。

box-sizing: content-box;

border-box

要素の横幅と高さにpaddingとborderが含まれます。
この設定により、要素のサイズを変更するとpaddingやborderも自動的に調整されます。

box-sizing: border-box;

どちらを選ぶべきか？

どちらを使用するかはプロジェクトや開発者の好みによります。
一部の開発者は、border-boxがシンプルで管理しやすいと感じ、それを選択します。
一方で、一般的なボックスモデルが期待される動作であるため、多くの場合はcontent-boxが使用されます。

body {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

*, *:before, *:after {
  box-sizing: inherit;
}

最後の例では、box-sizing: inherit;が使われ、その要素およびその子孫全体に規定されたbox-sizingの継承が行われます。