CSS3 box-sizing プロパティ

CSS3 の box-sizing プロパティを使用すると、要素の総幅（width）と総高さ（height）にパディング（padding）とボーダー（border）を含めることができます。

1. box-sizing プロパティなしの場合

デフォルトの CSS では、要素のサイズは次のように計算されます。

• width + padding + border = 要素の実際の表示幅
• height + padding + border = 要素の実際の表示高さ

これは、要素の幅や高さを設定する際、指定した値よりも実際の表示サイズが大きくなってしまうことを意味します（パディングとボーダーが指定したサイズの外側に追加されるため）。

1.1 実装上の問題点

以下の例では、2つの <div> 要素に同じ width と height を指定していますが、表示されるサイズは異なります。

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
}

.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
}

この結果、.div2 はパディングが含まれるため、.div1 よりもはるかに大きくレンダリングされます。これはグリッドレイアウトなどを作成する際に、意図しないレイアウト崩れの原因となります。

2. box-sizing プロパティありの場合

box-sizing: border-box; を使用すると、パディングとボーダーが幅と高さの中に含まれるようになります。

これにより、要素にパディングやボーダーを追加しても、指定した width や height が維持されます。

2.1 border-box を使用した解決策

前述の例に box-sizing: border-box; を適用すると、2つの <div> は同じサイズで表示されます。

.div1 {
  width: 300px;
  height: 100px;
  border: 1px solid blue;
  /* ボックスサイズにボーダーを含める */
  box-sizing: border-box;
}

.div2 {
  width: 300px;
  height: 100px;
  padding: 50px;
  border: 1px solid red;
  /* ボックスサイズにパディングとボーダーを含める */
  box-sizing: border-box;
}

現代の Web 開発においては、すべての要素に対してこの挙動を適用するのがベストプラクティスとされており、多くの開発者が CSS リセットの中で以下のような設定を行っています。

* {
  box-sizing: border-box;
}

3. CSS3 box-sizing プロパティ一覧

3.1 指定可能な値

• content-box: デフォルト値。width と height はコンテンツ領域のみを指し、パディングとボーダーは外側に追加される。
• border-box: width と height にパディングとボーダーが含まれる。要素のコンテンツ領域は、指定したサイズからパディングとボーダーを引いた残りとなる。

box-sizing: border-box; を活用することで、計算の手間を省き、直感的にレイアウトを構築できるようになります。特に、パーセンテージによる幅指定とピクセルによるパディングを併用するレスポンシブなカラム設計において、その真価を発揮します。