0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[備忘録]「box-sizing: border-box;」の有無

Last updated at Posted at 2021-01-14

本記事の目的

  • resetcssに含まれていてフロント実装中あまり意識しない、box-sizing: border-box;の有無によってどのようにレイアウトが変化するかを確認する。

事前準備

boxsizing.htmlboxsizing.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で表示してみる。
boxsizingfix.png
検証ツールの右下の図↓
boxsizingchart.png

事前に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;
  /* 新しく追加 */
}

↓↓↓↓
boxsizingpresense.png
検証ツールの右下の図↓
boxsizingpresensechart.png

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

感想

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?