CSS の box-sizing
プロパティは、要素の全体の幅と高さをどのように計算するのかを設定します。
CSS ボックスモデルの既定では、要素に割り当てられた width および height は、要素のコンテンツ領域のみに適用されます。要素に境界線やパディングがある場合、画面にレンダリングされる矩形の大きさは width および height にこれらを加えたものになります。つまり、 width および height を設定する際には、境界線やパディングが加えられるように値を調整しなければなりません。例えば、 width: 25%;
で左や右のパディングまたは左や右の境界がある 4 つのボックスを並べた場合、既定では親コンテナーの制約の中で 1 行には並びません。
box-sizing
プロパティは上記の振る舞いを調整するために使用できます。
content-box
は CSS box-sizing の既定の振る舞いです。要素の幅を100ピクセルに設定した場合、要素のコンテンツ領域の幅は100ピクセルになり、境界線やパディングを加えたものが最終的にレンダリングされる幅になり、要素が100pxよりも広くなります。border-box
は、要素に指定した width および height の中で境界線およびパディングを取るようにブラウザーに指示します。要素の width を100ピクセルに設定した場合、100ピクセルの中に追加した境界線やパディングが含まれ、コンテンツ領域はそれらの幅を吸収するために縮小します。これで普通は、要素に対するサイズ設定をもっと簡単になります。
注: 要素をレイアウトする際には、 box-sizing
を border-box
に設定しておくと便利です。これにより、要素の寸法の扱いが非常に簡単になり、一般的にコンテンツをレイアウトする際につまずく可能性のあるいくつかの落とし穴を排除することができます。 一方、 position: relative
または position: absolute
を使用する場合、 box-sizing: content-box
を使用することで、コンテンツに対する相対的な位置の値を設定することができ、境界やパディングの幅の変更に依存しなくなり、これが望ましい場合もあります。
構文
box-sizing
プロパティは、以下のいずれか1つのキーワードを選択して定義します。
値
content-box
- これは、 CSS 標準仕様で規定されている初期値および既定値です。
width
およびheight
プロパティの寸法は、コンテンツ領域のみを含むものとなり、パディング、境界線、マージン領域を含みません。例えば.box {width: 350px; border: 10px solid black;}
は 370px の幅のボックスを描画します。 - この場合、それぞれの要素の寸法は、 幅 = コンテンツの幅、高さ = コンテンツの高さ として計算されます(境界線やパディングの値を除く)。
border-box
width
およびheight
プロパティには、コンテンツ、パディング、境界線の領域が含まれますが、マージンは含まれません。なお、パディングと境界線はボックスの内側に置かれることに注意してください。例えば.box {width: 350px; border: 10px solid black;}
は、ブラウザーでボックスの幅が 350px、コンテンツ領域の幅 330px として描画されます。コンテンツボックスは負の値にできず 0 に丸められますので、要素を非表示にするためにborder-box
を使用することはできません。- この場合、それぞれの要素の寸法は、 幅 = 境界線 + パディング + コンテンツの幅、 高さ = 境界線 + パディング + コンテンツの高さ として計算されます。
公式定義
形式文法
content-box | border-box
例
content-box と border-box のボックスサイズ
この例では、2つの box-sizing
の値が、それ以外の条件が同じ要素のレンダリングの大きさをどのように変えるかを示します。
HTML
<div class="content-box">Content box</div>
<br>
<div class="border-box">Border box</div>
CSS
div {
width: 160px;
height: 80px;
padding: 20px;
border: 8px solid red;
background: yellow;
}
.content-box {
box-sizing: content-box;
/* 全体の幅: 160px + (2 * 20px) + (2 * 8px) = 216px
全体の高さ: 80px + (2 * 20px) + (2 * 8px) = 136px
コンテンツ領域の幅: 160px
コンテンツ領域の高さ: 80px */
}
.border-box {
box-sizing: border-box;
/* 全体の幅: 160px
全体の高さ: 80px
コンテンツ領域の幅: 160px - (2 * 20px) - (2 * 8px) = 104px
コンテンツ領域の高さ: 80px - (2 * 20px) - (2 * 8px) = 24px */
}
結果
仕様書
仕様書 | 状態 | 備考 |
---|---|---|
CSS Basic User Interface Module Level 3 box-sizing の定義 |
勧告 | 初回定義 |
ブラウザーの互換性
BCD tables only load in the browser