要素のサイズの算出方法を指定する、box-sizingを使ってみます。
対応ブラウザ
box-sizingが対応しているブラウザはこちら。
モダンブラウザでは全て対応していて、IEも8から対応しています。
サンプルコード
HTML
1 2 3 4 | <div id="contents"> <div id="content-box" class="box">content-box</div> <div id="border-box" class="box">border-box</div></div> |
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | #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に含める。 |
【参考サイト】
コメントが承認されるまで時間がかかります。