| 属性名 | box-sizing |
|---|---|
| 値 | border-box | padding-box | content-box |
| 初期値 | content-box |
| 適用可能要素 | width か height を持つすべての要素 |
| 継承 | 継承しない |
| メディア | visual |
| アニメーション | 不可 |
| CSS | IE/Edge | Firefox | Chrome | Opera | Safari |
|---|---|---|---|---|---|
| CSS3 | 8 | 1(-moz) 29 | 1(-webkit) 10 | 10.1 | 3.1(-webkit) 5.1 |
height や width が対象とする領域を指定します。box-sizing: border-box を指定することで、ボーダーによってコンテンツが想定した幅を超えてしまうことを防ぐことができます。
| 値 | 説明 |
|---|---|
| border-box | ボーダーの外側までを高さ・横幅とします。 |
| padding-box | パディングの外側(ボーダーの内側)までを高さ・横幅とします。CSS3 の草案で定義されていましたが、最終案には採用されていないようです。Firefox が -moz 付きでサポートしています。 |
| content-box | コンテンツの外側(パディングの内側)までを高さ・横幅とします。 |
width:150px |
width:150px |
width:150px |
|
border-box
|
padding-box
|
content-box
|
.sample-border-box {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: #ffcccc;
border: 10px solid #993333;
padding: 10px;
width: 80px;
height: 80px;
}
.sample-content-box {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
background: #ffcccc;
border: 10px solid #993333;
padding: 10px;
width: 80px;
height: 80px;
}
<h5>border-box</h5> <div class="sample-border-box">こんにちわ</div> <h5>content-box</h5> <div class="sample-content-box">こんにちわ</div>