CSS3

プロパティ

box-sizing

→●、mdn

ボックスのサイジング法（¶“ボックス寸法”の解釈の仕方）。

box-sizing プロパティは、固定的サイズ（<length> や <percentage> など）を［内容ボックス、ボーダーボックス］のどちらにあてがうかを定義する。それは、すべてのサイズ法プロパティ ― flex-basis も含む ― の解釈に影響する。

content-box

各種サイズ法プロパティに <length-percentage> として指定されたサイズは、ボックスの内縁サイズ ― マージン、ボーダー、パディングは除外されたサイズ ― を表現し、内容ボックスに適用される。ボックスの［パディング／ボーダー］は、指定された［ width、height ］の外側にレイアウトされ、描かれる。

注記： これが、CSS2 により指定される width、height のふるまいであり、既定になる。

<DIV style="border:10px solid red;
 width:100px; height:100px;
 padding:10px;
 box-sizing:content-box;
">テスト</DIV>

border-box

各種サイズ法プロパティに <length-percentage> として指定されたサイズは、ボックスの、視覚的に現れるサイズ ― ボーダー、パディングは含むが マージンは除外されたサイズ ― を表現し、ボーダー ボックスに適用される。ボックスの［パディング／ボーダー］は、指定された［width、height］の内側にレイアウトされ、描かれる。内容ボックスは、残りの空間を埋めるようにサイズされる ― 0 以上に切り上げられる下で。

内容のサイズは、［横幅、縦幅］のそれぞれについて、［サイズ法プロパティに指定されたサイズ］から［ボーダー、パディング］のサイズを減算して計算される。内容のサイズは、負になれないので、この計算は 0 以上に切り上げられる。

具体的には、getComputedStyle() を通して公開される使用値も、ボーダー ボックスを参照する。

<DIV style="border:10px solid red;
 width:100px; height:100px;
 padding:10px;
 box-sizing:border-box;
">テスト</DIV>

box-sizing は、［生の <length-percentage> 値、fit-content() などの関数記法内で利用される値］の両者に影響する ― 対照的に、［ auto、min-content ］などの数量的でない値には、波及しない（他が指定されない限り）。

.box {
  box-sizing:   content-box; /* 既定 */
  width:        100px;
  padding-left: 10px;
  border-left:  10px solid;
}

テスト