トップページ  > CSS3  > box-sizing

★CSS3リファレンス

box-sizing …… ボックスサイズの算出方法を指定する
Internet Explorer8Internet Explorer9 Firefox1(-moz-)Firefox2(-moz-)Firefox3(-moz-)Firefox4(-moz-) Google Chrome1(-webkit-)Google Chrome2(-webkit-)Google Chrome3(-webkit-)Google Chrome4(-webkit-)Google Chrome5(-webkit-)Google Chrome6(-webkit-) Safari3(-webkit-)Safari4(-webkit-)Safari5(-webkit-) Opera8Opera9Opera10
広告

box-sizingプロパティは、ボックスサイズの算出方法を指定する際に使用します。

値にcontent-boxを指定すると、 widthheightで指定する幅と高さが内容領域に対して適用されます。 幅と高さにはパディングとボーダーは含まれません。 これは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; を指定

広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ