🎨

【CSS】box-sizingの横幅の違い(content-box / border-box)

2023/01/21に公開約3,300字

はじめに

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

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

この記事の目指すところ

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

結論

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

  • content-boxwidth の値に paddingborder含めない
  • border-boxwidth の値に paddingborder含める

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

content-boxborder-box について

content-box の横幅について

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

計算式
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-boxcontent-box とは違い、width: 500px と指定すれば、paddingborder の値も全て含めた横幅(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;paddingborder が含まれていない分、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 の値に paddingborder含めない

border-box

  • width の値に paddingborder含める

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

Discussion

ログインするとコメントできます