ボックスモデルでは、指定されたwidth、heightプロパティは、そのコンテンツ領域のみに適用されますが、要素にパディングやボーダーがある場合、表示されるボックスの大きさはwidth、heightプロパティにこれらを加算したものになります。つまり、パディングやボーダーによってボックスは大きさは変ってしまうことになります。

これは、意図せずに親ボックスよりも子ボックスが大きくなってはみ出てしまったり、横並びのレイアウトが崩れてしまったり（段落ち）する原因となることがあります。

「box-sizing」プロパティを使うと、このような性質を変更することができます。

box-sizingプロパティとは

box-sizingプロパティはボックスサイズの算出方法を切り替えるためのプロパティで、要素の幅（width）と高さ（height）の中にパディングやボーダーの領域を含めるかどうかという設定ができます。

box-sizingプロパティは以下の2つの値を指定することができます。

それぞれの値で具体的にどのような違いが出てくるのか見ていきましょう。

content-boxの場合

値が「content-box」に指定されている場合、ボックスサイズの計算方法としてパディングやボーダーをwidthプロパティとheightプロパティに含めません。widthプロパティとheightプロパティの寸法は、コンテンツ領域のみとなります。

ボックスサイズは、「幅＝コンテンツの幅」、「高さ＝コンテンツの高さ」として計算されます。この値が規定値なので、通常のボックスはこのように表示されます。

<div class="parent">
  <div class="child">
    <div>box-sizingは、要素に指定したpaddignやborderの領域をコンテンツ内に「含めるか含めないか」を指定して変更ができます。</div>
  </div>
</div>

.parent {
	width: 50%;
	padding: 30px;
	background-color: #666666;
}
.child {
	width: 100%;
	background-color: #ffffff;
	box-sizing: content-box; /* 指定しない場合の規定値 */
}

このボックスにパディングやボーダーを追加します。

.child {
	width: 100%;
	background-color: #ffffff;
	padding: 20px; /* このプロパティを追加 */
	border: 10px solid #000000; /* このプロパティを追加 */
	box-sizing: content-box; /* 指定しない場合の規定値 */
}

追加された分だけボックスのサイズは大きくなりますので、親の要素に大きさの指定がある場合は、このようにはみ出てしまうことがあります。

border-boxの場合

値を「border-box」に指定している場合、ボックスサイズの計算方法はパディングやボーダーをwidthプロパティとheightプロパティの中に含まれるようになります。

そのため、パディングやボーダーをどれだけ大きくしてもボックスサイズは変わらないことになります。これは、パディングやボーダーが大きくなるとコンテンツ領域が小さくなるということです。

ボックスサイズは、「幅＝コンテンツの幅＋左右のパディング＋左右の境界線」、「高さ＝コンテンツの高さ＋上下のパディング＋上下の境界線」として計算され、ボックスはこのように表示されます。

.child {
	width: 100%;
	background-color: #ffffff;
	padding: 20px;
	border: 10px solid #999999;
	box-sizing: border-box; /* このプロパティを変更 */
}

border-boxをすべての要素に適用しておく

規定値でcontent-boxが指定されていることで、ボックスからはみ出してしまったり、段落ちなどをしてしまうたびにbox-sizingプロパティの値を変更しなければなりません。

実際のレイアウトで、content-boxである必要のほうが多い場合には、効率の良いやり方としてあらかじめ全ての要素のbox-sizingプロパティの値にborder-boxを指定しておくと便利です。

全ての要素に対して指定するとき、全称セレクタ（ユニバーサルセレクタ）「*」を使って以下のように指定します。

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