本記事の目的
- resetcssに含まれていてフロント実装中あまり意識しない、
box-sizing: border-box;の有無によってどのようにレイアウトが変化するかを確認する。
事前準備
boxsizing.htmlとboxsizing.cssという名前のファイルを以下の様に用意した。
boxsizing.html
<!DOCTYPE html><html><head><title>boxsizing練習</title><metacharset="utf-8"><linkrel="stylesheet"href="boxsizing.css"></head><body><divclass="box-space">
boxsizingの練習
</div></body></html>boxsizing.css
.box-space{background-color:aqua;border:2pxsolidred;height:100px;width:100px;padding:10px;margin:10px;}検証
事前準備で用意したHTMLファイルをGoogle Chromeで表示してみる。
検証ツールの右下の図↓
事前にCSSで指定した通りだが、paddingがあることで目に見えるdiv要素が大きくなってしまっている。
(marginは目に目に見えないので覗く)
divの高さ :100px
divの横幅 :100px
内側の余白 :10px
外側の余白 :10px
divを囲う線の幅 :2px
目に見える部分の縦合計値 (100px + 10px + 10px + 2px + 2px = 124px)
目に見える部分の横合計値 (100px + 10px + 10px + 2px + 2px = 124px)
次にbox-sizing: border-box;を入れて表示してみる。
boxsizing.css
.box-space{background-color:aqua;border:2pxsolidred;height:100px;width:100px;padding:10px;margin:10px;/* 新しく追加 */box-sizing:border-box;/* 新しく追加 */}↓↓↓↓
検証ツールの右下の図↓
box-sizing: border-box;がない時に比べdiv要素が小さくなっている様に見える。
divの高さ :76px
divの横幅 :76px
内側の余白 :10px
外側の余白 :10px
divを囲う線の幅 :2px
目に見える部分の縦合計値 (76px + 10px + 10px + 2px + 2px = 100px)
目に見える部分の横合計値 (76px + 10px + 10px + 2px + 2px = 100px)
結果
box-sizing: border-boxがないときの目に見える部分の高さと横幅 : 124px
box-sizing: border-boxがあるときの目に見える部分の高さと横幅 : 100px
box-sizing: border-boxがあると、目に見える部分の高さと横幅を指定したheightとwidthに合わせるために、箱のサイズ(上の場合box-spaceのdiv要素)が調整されることがわかった。
感想
- 当たり前のことも馬鹿正直に検証してみると「オオ〜」ってなる。