box-sizingについて〜CSS3

box-sizingの値は次のようになっています。

content-box

パディングとボーダーを幅と高さに含めない（初期値）

border-box

パディングとボーダーを幅と高さに含める

content-boxは現状のボックスモデルに従った幅を表します。一方border-boxの方は古いIEの解釈と同様でパディングやボーダーを幅に含めたものです。

言わんとすることはわかるのですが、わざわざ混乱を招く古いIEの解釈などを持ち込んだのか疑問なプロパティでした。

けれどもこれはスマホサイトを作成するときなどに威力を発揮します。

横幅をピクセル指定の固定幅にするときは必要ではありませんし、むしろ混乱の原因になります。
けれども、横幅をパーセント指定する場合に困ったことが起こります。
次のサンプルで確認してみましょう。

横幅を100％指定したサンプル
横スクロールして確認してください。

<header><h1>box-sizing:border-box</h1></header>
<div id="content"><p> 権利はペディアペディア・プロジェクト</p></div>
<footer>studio.m</footer>

CSS

body{
	margin:0;
}
header{
	width:100%;
	height:200px;
	background-color:#FCF;
}
#content{
	width:100%;
	height:500px;
	background-color:#FF9;
	padding:20px;
}
footer{
	width:100%;
	height:200px;
	background-color:#CFF;
}

サンプルはheder と　content　と　footerで構成されたものです。それぞれの横幅を100％指定すると横幅は画面いっぱいに広がります。けれども、contentにのみpaddingを設定するとcontentの横幅が画面の外側に飛び出します。
ボックスモデルの考え方では当然そうなるはずです。

これを解決するのにbox-sizing:border-boxを使います。

box-sizing:border-boxを使ったサンプル

#content{
	box-sizing:border-box;
}

contentのみにbox-sizing:border-boxを指定することでボーダー領域までをwidthで指定できるようになります。
これで簡単にでこぼこを解決できるようになります。