本記事の目的
- resetcssに含まれていてフロント実装中あまり意識しない、
box-sizing: border-box;の有無によってどのようにレイアウトが変化するかを確認する。
事前準備
boxsizing.htmlとboxsizing.cssという名前のファイルを以下の様に用意した。
boxsizing.html
<!DOCTYPE html>
<html>
<head>
<title>boxsizing練習</title>
<meta charset="utf-8">
<link rel="stylesheet" href="boxsizing.css">
</head>
<body>
<div class="box-space">
boxsizingの練習
</div>
</body>
</html>
boxsizing.css
.box-space {
background-color: aqua;
border: 2px solid red;
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: 2px solid red;
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要素)が調整されることがわかった。
感想
- 当たり前のことも馬鹿正直に検証してみると「オオ〜」ってなる。