box-sizingを使ってみる

要素のサイズの算出方法を指定する、box-sizingを使ってみます。

対応ブラウザ

box-sizingが対応しているブラウザはこちら。
モダンブラウザでは全て対応していて、IEも8から対応しています。

サンプルコード

HTML

<div id="contents">
	<div id="content-box" class="box">content-box</div>
	<div id="border-box" class="box">border-box</div>
</div>

CSS

#contents {
	width: 500px;
	height: 100%;
	border-left: #000000 1px solid;
	border-right: #000000 1px solid;
	margin: 0 auto;
}
#contents .box {
	width: 100%;
	border: #000000 20px solid;
	padding: 20px;
	margin-bottom: 20px;
}
#content-box {
	box-sizing: content-box;
	background: red;
}
#border-box {
	box-sizing: border-box;
	background: blue;
}

box-sizingのデモページ
レスポンシブサイトで幅を%指定、paddingをpx指定する時などに使うと便利です。
　

【参考サイト】

• box-sizing－CSS3リファレンス