box-sizingプロパティは、要素のサイズ（Size）を計算する際に基準となる領域（Area）を定義します。
- content-box: コンテンツ領域（Content Area）のみをサイズ（Size）の計算に含めます。
- border-box: コンテンツ（Content）、パディング（Padding）、境界線（Border）領域まですべて含めてサイズを計算します。
形式の構文
selector {
box-sizing: content-box | border-box;
}
構文
/* キーワード値（Keyword values） */
box-sizing: content-box;
box-sizing: border-box;
/* グローバル値（Global values） */
box-sizing: inherit;
box-sizing: initial;
box-sizing: revert;
box-sizing: revert-layer;
box-sizing: unset;
値
content-boxとborder-boxのうち、要素のサイズをどちらを基準として計算するかを指定します。
content-box
content-boxは、要素の width と height をコンテンツ領域のみを考慮してサイズを計算します。
padding と border はサイズに含まれません。つまり、padding と border は要素のサイズの計算外として追加されます。
もし要素に padding や border がある場合、実際の要素のサイズよりも大きく見えます。
widthやheightを許容するすべての要素の中で、<button>要素を除けばブラウザでデフォルトとして設定される初期値です。
border-box
border-boxは、要素の width と height をコンテンツ領域、padding と border をすべて含めて計算します。
もし要素に padding や border があったとしても、実際の要素のサイズと同一です。
参考資料
CSS box-sizingプロパティ：要素サイズの計算基準の定義
CSS box-sizingプロパティ：要素サイズの計算基準の定義 - codingEverybody
box-sizingプロパティは、要素のサイズを計算する際の基準となる領域を定義します。content-boxまたはborder-boxを基準としてサイズを計算するよう指定します。
codingeverybody.jp
CSS box-sizing 속성 – 요소 크기 계산 기준 정의
CSS box-sizing 속성 – 요소 크기 계산 기준 정의 - 코딩에브리바디
box-sizing 속성은 요소 크기를 계산할 때 기준이 되는 영역을 정의합니다. content-box 또는 border-box 기준으로 크기를 계산하도록 지정합니다.
codingeverybody.kr
CSS box-sizing Property – Defines the Element’s Sizing Calculation Model
CSS box-sizing Property – Defines the Element’s Sizing Calculation Model - codingCourses
The box-sizing property defines the area used to calculate an element's size, specifying whether the calculation is based on the content box or the border box.
coding.courses