border-boxとcontent-boxの違い｜どちらが大きくなる？

[width:250px;　height:250px;]と指定すると、border-boxとcontent-boxではどう違うの？実際の幅はどうなっちゃうの？

今回はbox-sizingプロパティを通して、ボックスモデルの理解を深めたいと思います。

box-sizingは「外枠を引いたときになんだか大きくなるな？」「画面に収まらないな？」というような悩みを解決したいときに役に立ちますよ。

box-sizingプロパティとは？

box-sizingプロパティは要素の横幅と縦幅にpaddingとborderを加えるか加えないか指定します。要素が入るボックスの大きさは、[border-box][content-box]の2つの方法があります。

要素というのは、例えばdivタグの中身です。写真やテキストなどをいいます。

{box-sizing:border-box;}はpaddingとborderを含めます。

{box-sizing:content-box;}はpaddingとborderを含めません。

＊marginはどちらにも含まれません

widthとheightに含まれるプロパティ

いったん、ここでボックスモデルについて復習しましょう。

【CSS】汎用性の高い囲み線を作りながら、marginと paddingを覚えようより再びこの画像です。

ボックスモデルはボックスの概念という意味になります。

ボックスは4つからできています。

内側と外側を分けるのがborderです。「なんでボックスサイズにピッタリのボーダーが表示されないの？」と悩んでいるときは、ボーダーがmarginとpaddingの間に指定させることを忘れていることが多くあります。

ボックスサイズは青枠までのボックスの大きさ、または、黄色の点線までのボックスの大きさになります。

ややこしいですが、ボックスモデルはmarginまで含まれますが、ボックスサイズにはmarginは含まれません。

次は具体的な数字を用いて、実際の大きさはどうなるか考えてみましょう！

まずは公式です。この公式は後で使いますよ。

border-boxのサイズ(width,height)＝要素の大きさ＋(padding*2)+(border*2)

content-boxのサイズ（width,height）＝要素の大きさ

たとえば、正方形のdivタグのなかに写真を表示するとします。

<--! こちらはHTMLです -->
<div>
  <img src="img/01.jpeg" alt="">
</div>

/* こちらはCSSです  */
div{
width: 250px;
height: 250px;
padding: 10px;
margin: 50px;
border: 5px;
}

問題です

1．{box-sizing: border-box;}と指定したとき、写真の大きさはいくつになりますか？

2．{box-sizing: content-box;}と指定したときのボーダーまでのボックスの大きさはいくつになりますか？

公式を使って考えてみましょう。

border-boxとはborderとpaddingを含めたサイズが要素の大きさ、つまりwidthとなります。

250=写真の大きさ+paddingの幅(10*2)+borderの幅(5*2)

写真の大きさ＝250-(20+10)=230

よって、答えは230ピクセルになります。

次は、ボックスモデルの大きさを考えます。これは表示サイズ、画面サイズを考えるときに必要になる計算です。「なんか横スクロールバーが表示されるな」「画面が切れるぞ？」となった時に使える計算です。

content-boxのサイズ＝width=250

ボーダーまでのボックスの大きさ＝要素＋padding*2+border*2
=250+10*2+5*2
=250+20+10
=280

よって、答えは280ピクセルになります。

border-boxとcontent-boxでは、大きさがずいぶん変わるのね。

border-boxは中身のサイズを調整してくれるから、レスポンシブデザインのホームページには便利なプロパティだわ！