本記事の目的

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要素)が調整されることがわかった。

感想

当たり前のことも馬鹿正直に検証してみると「オオ〜」ってなる。