box-sizingプロパティは、ボックスサイズの算出方法を指定する際に使用します。
値にcontent-boxを指定すると、
widthとheightで指定する幅と高さが内容領域に対して適用されます。
幅と高さにはパディングとボーダーは含まれません。
これはCSS2.1の仕様通りの解釈で、DOCTYPEスイッチの標準モードのような表示になります。
値にborder-boxを指定すると、widthとheightで指定する幅と高さがボーダーボックスに対して適用されます。
内容領域にパディングとボーダーを含んだ範囲に対して幅と高さが適用されるため、
パディングとボーダーの分だけボックスサイズが小さくなります。
DOCTYPEスイッチの互換モードのような表示になります。
■値
- content-box
- パディングとボーダーを幅と高さに含めない（初期値）
- border-box
- パディングとボーダーを幅と高さに含める
- inherit
- 親要素の値を継承する
■初期値・適用対象・値の継承
- 初期値
- content-box
- 適用対象
- 幅、または、高さを持つすべての要素
- 値の継承
- しない
■使用例
CSSソースは外部ファイル（sample.css）に記述
p.sample1 {
width: 300px; height: 100px; background-color:greenyellow;
border: 10px solid orange;
box-sizing: content-box;
}
p.sample2 {
width: 300px; height: 100px; background-color:greenyellow;
border: 10px solid orange;
box-sizing: border-box;
}
HTMLソース
<html>
<head>
<link rel=”stylesheet” href=”sample.css”
type=”text/css”>
</head>
<body>
<p class=”sample1″>box-sizing: content-box; を指定</p>
<p class=”sample2″>box-sizing: border-box; を指定</p>
</body>
</html>
ブラウザ上の表示
box-sizing: content-box; を指定
box-sizing: border-box; を指定
■ベンダープレフィックスを付けた場合の使用例
CSSソースは外部ファイル（sample.css）に記述
p.prefix_sample1 {
width: 300px; height: 100px; background-color:greenyellow;
border: 10px solid orange;
-moz-box-sizing: content-box;
-webkit-box-sizing: content-box;
-o-box-sizing: content-box;
-ms-box-sizing: content-box;
}
p.prefix_sample2 {
width: 300px; height: 100px; background-color:greenyellow;
border: 10px solid orange;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
}
HTMLソース
<html>
<head>
<link rel=”stylesheet” href=”sample.css”
type=”text/css”>
</head>
<body>
<p class=”prefix_sample1″>box-sizing: content-box; を指定</p>
<p class=”prefix_sample2″>box-sizing: border-box; を指定</p>
</body>
</html>
ブラウザ上の表示
box-sizing: content-box; を指定
box-sizing: border-box; を指定