box-sizingプロパティ
box-sizingプロパティは、
要素のサイズ計算方法を変更することができます。
デフォルトでは、paddingを追加すると
要素が拡張されます：例えば幅widthを
100px、padding-leftを
20pxに設定した場合、要素の実際の幅は
120pxになります。
さらにborder-leftを
10px設定すると、要素の実際の幅は
130pxになります。つまり、paddingとborderは
ブロックを拡張します（幅も高さも）。
この動作はbox-sizingで変更できます。
構文
セレクタ {
box-sizing: content-box | border-box;
}
値
| 値 | 説明 |
|---|---|
content-box |
paddingとborderの両方がブロックを拡張します。
|
border-box |
paddingもborderもブロックを拡張しません。 |
デフォルト値: content-box。
例 . 標準の動作
現在、両方のブロックは同じ高さと幅を持っていますが、
2番目のブロックにはpaddingが設定されており、
1番目のブロックには設定されていません。サイズの違いを
確認してください：
<div id="elem1">elem1</div>
<div id="elem2">elem2</div>
#elem1 {
width: 300px;
height: 100px;
margin-bottom: 10px;
background: #f1f1f1;
}
#elem2 {
padding: 50px;
width: 300px;
height: 100px;
background: #f1f1f1;
}
:
例 . 標準の動作
現在、両方のブロックは同じ高さと幅を持っていますが、
2番目のブロックには10pxの境界線が設定されており、
1番目のブロックには設定されていません。サイズの違いを
確認してください：
<div id="elem1">elem1</div>
<div id="elem2">elem2</div>
#elem1 {
width: 300px;
height: 100px;
background: #f1f1f1;
}
#elem2 {
border: 10px solid black;
width: 300px;
height: 100px;
background: #f1f1f1;
}
:
例 . 標準の動作
現在、2番目のブロックにはpaddingと10pxの
境界線の両方があります：
<div id="elem1">elem1</div>
<div id="elem2">elem2</div>
#elem1 {
width: 300px;
height: 100px;
background: #f1f1f1;
}
#elem2 {
padding: 50px;
border: 20px solid black;
width: 300px;
height: 100px;
background: #f1f1f1;
}
:
例 . border-box 値
2番目の要素に、box-sizingプロパティの値として
border-boxを追加しましょう。これで、1番目と2番目の
要素のサイズが同じになります：
<div id="elem1">elem1</div>
<div id="elem2">elem2</div>
#elem1 {
width: 300px;
height: 100px;
background: #f1f1f1;
}
#elem2 {
box-sizing: border-box;
padding: 50px;
border: 10px solid black;
width: 300px;
height: 100px;
background: #f1f1f1;
}
:
関連項目
-
outlineプロパティ
要素を拡張しない境界線を作成します
