box-sizing

box-sizing

注意

Opera8.0enで実装されていることを確認しました。CSS3草稿の先行実装と思われます。

実験的なものなので将来削除される可能性があります。

用語の簡単な解説

'box-sizing'プロパティは、ボックスモデルの計算式を指定するプロパティです。これはCSS3草稿7.1 box-sizing@CSS3 Basic User Interface Moduleの先行実装です。

指定できる値はcontent-box|border-box|inheritです。

CSS1/2では通常content-boxと同等の方法で計算します。詳しくは下記の現状の説明を見てください。

説明

CSS2ではボックスモデルの幅や高さは内容領域の幅や高さによって計算されます。しかしIE6.0互換モード・IE5以前・Opera7以降の互換モードではパディングやボーダーのサイズも含めてしまいます(参照:ボックスの幅や高さを算出するときにパディングやボーダーのサイズを含めてしまう@CSSバグリスト)

<html>
<head>
<title>test - box width & height</title>
<style>
body {
 background: url(im.png);
 margin: 0px;
 padding: 10px;
}

div.test {
 margin: 0px;
 padding: 10px;
 border: 40px solid #0000ff;
 width: 200px;
 background-color: #ffffff;
}
</style>
</head>

<body>
<div class="test">test test</div>
<img src="test.png" width="300" height="100">
</body>
</html>

というhtml及びcssを例にとります。

CSS2の規則に従うと、内容領域の幅が200px、ボーダーの端から端までの幅が300px(=200px+(10px+40px)*2)となる筈です。が、IEにはバグがあり、ボーダーの端から端までの幅を200pxとし、内容領域を狭めてしまいます。

content-boxの場合

content-boxの場合

border-boxの場合

border-boxの場合

具体的には、content-boxならCSS2に準拠してwidth=内容領域の幅、border-boxならIE6,Opera7の互換モード風にwidth=内容領域の幅+(padding-leftの値+border-left-widthの値)+(padding-rightの値+border-right-widthの値)、というようにwidthの計算方法を指定出来ます。

Error : RSSが取得できませんでした。 Error : RSSが取得できませんでした。