box-sizingプロパティは、ボックスサイズの算出方法を指定する際に使用します。
値にcontent-boxを指定すると、
widthとheightで指定する幅と高さが内容領域に対して適用されます。
幅と高さにはパディングとボーダーは含まれません。
これはCSS2.1の仕様通りの解釈で、DOCTYPEスイッチの標準モードのような表示になります。
値にborder-boxを指定すると、widthとheightで指定する幅と高さがボーダーボックスに対して適用されます。
内容領域にパディングとボーダーを含んだ範囲に対して幅と高さが適用されるため、
パディングとボーダーの分だけボックスサイズが小さくなります。
DOCTYPEスイッチの互換モードのような表示になります。
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>
<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; を指定
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>
<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; を指定
