box-sizingプロパティの説明
CSSのbox-sizingプロパティは、要素の幅や高さを計算する祭に余白や境界線の範囲をどのように扱うべきかを指定します。これによりwidthやheightで表されるサイズが、borderやpaddingの範囲を含めるか否かを定義します。
HTMLの各要素は、CSSのボックス・モデルに基づいて四角形の箱としてレイアウトされます。この箱は4つの仮想区域を持っており、それぞれコンテンツ（内容）、パディング（内側の余白）、ボーダー（境界線）、マージン（外側の余白）に分類できます。
要素全体の幅や高さを決定するには、どの領域を含めるか除外するかを定義しておかなければなりません。box-sizingは、この振る舞いを制御するためのプロパティです。
box-sizingに指定できる値
box-sizingの使い方とサンプルコード
box-sizingプロパティの構文は以下の通りです。
/* キーワード値 */
box-sizing: border-box;
box-sizing: content-box;
/* グローバル値 */
box-sizing: inherit;
box-sizing: initial;
box-sizing: revert;
box-sizing: unset;
box-sizingの実例
それでは実際にbox-sizingプロパティの書き方を見ていきましょう。まず初めに、このプロパティが登場してから頻繁に使われるようになったCSSリセットの一部を紹介します。
*, *::before, *::after {
box-sizing: border-box;
}
このように記述すると、全ての要素と擬似要素のサイズ計算がborder-boxを基準に行われます。既定値であるcontent-boxのルール下でマークアップを行う場合、レイアウトの計算が非常に面倒でした。widthやheightは、あくまでコンテンツを表示する範囲を示すので、borderやpaddingを指定された要素は、個別にケアする必用があったからです。
続いて、同じ装飾を施した要素を用意してbox-sizingの値を変えた場合の挙動を確認します。以下の例は、同じ幅の境界線と余白を持つ<div>にborder-boxとcontent-boxを与えた場合の比較です。
<section class="samp_box">
<div id="sizing_1">
<span>box-sizing: border-box;</span>
</div>
<div id="sizing_2">
<span>box-sizing: content-box;</span>
</div>
</section>
.samp_box {
overflow: auto;
padding: 0 1rem 1rem 1rem;
text-align: center;
}
.samp_box > div {
width: 300px;
height: 100px;
margin: 1rem auto 0 auto;
padding: 20px 10px;
border: 5px solid #000;
}
#sizing_1 {
box-sizing: border-box;
}
#sizing_2 {
box-sizing: content-box;
}
box-sizingの値がborder-boxの場合は、widthとheightで指定したサイズが要素の大きさとなり、borderやpaddingは、要素の内側に向かって拡張します。そのため、コンテンツの表示領域は境界線と余白を除いたものとなり、最終的な内容の表示位置はこれらのプロパティの値に依存します。
box-sizingの値がcontent-boxの場合は、widthとheightで指定したサイズが、コンテンツの表示範囲を意味します。上記の内容では、300pxの幅に左右の余白20pxが足され、さらに5pxの境界線が両側に引かれているので、330pxで表示されます。高さも同様に境界線と余白の範囲が足されています。
これを分かりやすくするために、背景色を追加してbackground-clipのcontent-boxで切り抜きます。
2つのボックスを比較してみてください。上段のボックスは黒い境界線を含む幅が300px、高さが100pxに収まっているのに対して、下段のボックスは青い背景が幅300px、高さ100pxで描画され、その外側に余白と境界線が足されています。
つまり、どちらもwidthで指定された幅とheightで指定された高さを守っているのですが、その基準が異なるのです。box-sizingは、これを変更したい時に使用します。逆に言うと、box-sizingは要素の幅や高さを決定する上で、非常に重要な要因を操作します。
この機能について詳しく理解したい方は、ボックス・モデルの解説を参照してください。