Box Model を変更する box-sizing プロパティ

1. このページの目的

box-sizing について説明する。

2. box-sizing について

box-sizing の値

box-sizing プロパティの値
値 説明
content-box
  • デフォルト値
  • 要素の幅を100ピクセルに設定した場合、要素のコンテンツ領域の幅は100ピクセルになり、境界線やパディングを加えたものが最終的にレンダリングされる幅になります。
  • width = コンテンツ幅
  • Box全体の幅 = margin + border + padding + width
border-box
  • 要素に指定した width および height の中で境界線およびパディングを取るようにブラウザーに指示します。
  • 要素の width を100ピクセルに設定した場合、100ピクセルの中に追加した境界線やパディングが含まれ、コンテンツ領域はそれらの幅を吸収するために縮小します。これで普通は、要素に対するサイズ設定がもっと簡単になります。
  • 幅を固定したい場合に便利。
  • width = border + padding + コンテンツ幅
  • Box全体の幅 = margin + width

（引用元：CSS box-sizing — 幅と高さの適用方法を制御 - CSS: カスケーディングスタイルシート | MDN）

3. デモ

(1) box-sizing: content-box;

Foo

CSS

.box1 {
  box-sizing: content-box;
  width: 300px;
  margin: 1em;
  padding: 1em;
  border: 1em solid cyan;
  background-color: white;
}

(2) box-sizing: border-box;

Foo

CSS

.box2 {
  box-sizing: border-box;
  width: 300px;
  margin: 1em;
  padding: 1em;
  border: 1em solid cyan;
  background-color: white;
}

4. 参考