box-sizingを使ってみる

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

対応ブラウザ

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

try-to-use-the-box-sizing01

サンプルコード

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: content-box; paddingとborderをwidthとheightに含めない。(初期値)
box-sizing: border-box; paddingとborderをwidthとheightに含める。

 

【参考サイト】

 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年3月
 12
3456789
10111213141516
17181920212223
24252627282930
31