CSSリファレンス

実践向けCSSリファレンス

ボックスサイズの算出方法を設定する box-sizing

概要

CSSプロパティ「box-sizing」は、要素の幅(width)と高さ(height)を計算するボックスサイズの算出方法を変更することができます。このプロパティを理解するには、まずボックスサイズについて理解しておく必要があります。

ボックスサイズとは

ボックスサイズとは横幅(高さ)と  余白(padding)とボーダーの幅(border-)を合計した値のことを指します。

横幅の合計値 = width + padding + border
高さの合計値 = height + padding + border

以下の例を見てみましょう。2つのボックスは同じ幅と高さを指定していますが、一方には余白とボーダーを指定しています。見ていただけるとわかるように、余白とボーダーを指定した分だけ大きなボックスが表示されました。

<div class="box">ボックスモデル。</div>
<div class="w200-h100">余白、ボーダー指定なし</div>
<style>
.box {
  width: 200px;
  height: 100px;
  border: 5px solid #000;
  padding: 10px;
  background-color: #def;
  margin-bottom: 10px;
}
.w200-h100 {
  width: 200px;
  height: 100px;
  background-color: #def;
}
</style>

このように正確なレイアウトを実現させるためには、余白やボーダーの幅も計算に入れながら組み上げる必要があります。しかし、複雑な指定が入ってくると煩雑になりやすく、レイアウト崩れの原因にもなりかねません。

そこでこのプロパティの値「border-box」を指定することで、指定した幅(高さ)に余白とボーダー幅を含めることができますので、複雑な計算をしなくても正確なレイアウトを実現しやすくなったといえます。

指定方法

{ box-sizing: キーワード値 }

入れられる値は以下の通りです。

説明
content-box初期値です。余白とボーダーを幅と高さには含めません
border-box余白とボーダーを幅と高さには含めます

使用例

要素に複雑な値の余白やボーダー幅を入れても崩れないことを確認してみてください。

<div>
  <p class="box-sizing">ボックス</p>
</div>
<style>
* {
  margin: 0;
  padding: 0;
}
div {
  width: 300px;
  height: 100px;
  border: 7px solid #000;
}
.box-sizing {
  width: 200px;
  height: 100px;
  padding: 11px 1px 30px 8px;
  border-top: 1px solid #f8c09e;
  border-right: 5px solid #f8c09e;
  border-bottom: 2px solid #f8c09e;
  border-left: 10px solid #f8c09e;
  background: #dee;
  box-sizing: border-box;
}
</style>

仕様書

関連CSSプロパティ

閉じる