🎨

【CSS】box-sizingの横幅の違い（content-box / border-box）

に公開
CSS
初心者
tech

はじめに

多くの方はCSSプロパティの box-sizing の初期設定を box-sizing: border-box; （以下：border-box）と指定しているのではないでしょうか。私も基本的にそうです。

ただ、プロジェクトによっては border-box; が初期で設定されておらず、初期値である box-sizing: content-box;（以下：content-box）で対応しなければいけない場合もあるかと思います。
その際に border-box が設定されている気分でいると「あれ、なんか思ったように横幅が設定できないな...」というときが来ます（経験談🤦🏻‍♂️）。その際の助けになれば幸いです。

この記事の目指すところ

この記事では box-sizing の横幅がどのように算出されているのかを理解し、各プロパティの値を適切に使用できることを目指します。

結論

先に結論を言うと、content-box と border-box の違いは下記になります。

  • content-box → width の値に padding と border を含めない
  • border-box → width の値に padding と border を含める

具体的にどのような挙動になるのかを、下記で確認していきます。

content-box と border-box について

content-box の横幅について

前提として、width: 500px; padding: 20px; border: 5px; が設定されているとします。
content-box の場合、width: 500px に設定しているのにも拘わらず、実際の横幅は 550px になります（下記参照）。理由は width の値に padding と border の数値は含まれないためです。

計算式
500px（width）+ 20px（padding）* 2（左右）+  5px（border）* 2（左右）= 550px

html
<div class="box content-box">content-box / width: 500px / padding: 20px / border: 5px</div>
css
.box {
  width: 500px;
  height: 100px;
  padding: 20px;
  margin: 20px;
}
.content-box {
  box-sizing: content-box;
  background-color: lightblue;
  border: 5px solid blue;
}

border-box の横幅について

前提として、content-box と同様、width: 500px; padding: 20px; border: 5px; が設定されているとします。
border-box は content-box とは違い、width: 500px と指定すれば、padding や border の値も全て含めた横幅（width: 500px）となります。
最大幅 = 指定した数値 となるため直感的にわかりやすいことから、CSSのデフォルトの指定に border-box を指定している方が多いです。

計算式
450px（width）+ 20px（padding）* 2（左右）+ 5px（border）* 2（左右）= 500px

html
<div class="box border-box">border-box / width: 500px / padding: 20px / border: 5px</div>
css
.box {
  width: 500px;
  height: 100px;
  padding: 20px;
  margin: 20px;
}
.border-box {
  box-sizing: border-box;
  background-color: lightpink;
  border: 5px solid red;
}

並べてみるとこんな感じ

content-box（青）の方は、width: 500px; に padding と border が含まれていない分、border-box（赤）よりも横幅が大きくなります。

コードの全体像

全コード（contentbox と border-box）
html
<div class="box content-box">content-box / width: 500px / padding: 20px / border: 5px</div>
<div class="box border-box">border-box / width: 500px / padding: 20px / border: 5px</div>
css
.box {
  width: 500px;
  height: 100px;
  padding: 20px;
  margin: 20px;
}
.content-box {
  box-sizing: content-box;
  background-color: lightblue;
  border: 5px solid blue;
}
.border-box {
  box-sizing: border-box;
  background-color: lightpink;
  border: 5px solid red;
}

まとめ

content-box

  • width の値に padding と border を含めない

border-box

  • width の値に padding と border を含める

今回は以上となります。
ここまでお読みいただき、ありがとうございました🙏

Discussion