きっちりとブロック要素の幅を指定していたのに、枠線を引いたとたんレイアウトが崩れることがあります。
レイアウト崩れが起こる原因
これは、枠線はブロック要素の外側に引かれるためです。
例えば、横幅「100px」の「div」の外枠に「1px」の枠線を引いた場合、「100px」の「div」の外枠に左右に「1px」ずつの枠線が引かれることになります。
つまり「1px」の枠線を引くと「102px」のブロック要素ができあがることになります。これがレイアウト崩れの原因です。
解決方法
解決方法は簡単です。
ブロック要素の外枠では無く、内枠に枠線が引かれるようにすればOKです。
これはCSSの「box-sizing」という属性に「border-box」という値をセットするだけで実現可能です。
HTML側
|
1 2 3 |
<!-- 内枠に線のDiv --> <p>[ 内枠に線のDiv ]</p> <div class="box2"></div> |
CSS側
|
1 2 3 4 5 |
.box2 { background:cyan; border: 5px solid black; box-sizing:border-box; } |
ポイントは4行目の「box-sizing:border-box;」です。
これを追加しておくと、内枠に線を引くのでブロック要素の大きさが変わらなくなりレイアウトが崩れなくなります。
サンプルも作ったので見ていってください。
