ボックスモデルを理解すればborder-boxとcontent-boxの違いが分かる

この記事はCSSのセレクタbox-sizingのプロパティborder-boxとcontent-boxについてまとめています。

「box-sizingが効かない」、「border-boxとcontent-boxは具体的どう違うの？」という悩みは、私はずっとありました。でも、これってボックスモデルがぼや～としか理解していないからなんです。

ボックスモデルとボックスサイズについて解説していきますので、どうそ最後までお付き合いくださいね。

ボックスモデルはHTMLとCSSの共通概念

まずは、ボックスモデルについて解説します。

ボックスモデルはHTMLで定義された要素はすべて長方形のボックスの中に納められているという考え方です＊。

ボックスモデルの概念は4つの領域からできています。

1. content：文章や写真、グラフなどの内容
2. padding：borderとcontentの中間にある余白
3. border：paddingとmarginの中間の境界線
4. margin：ボーダーよりも外側の余白

paddingとmarginの違いはこちらの記事にまとめましたので、よかったら読んでみてくださいね。

概念を箱でイメージしろって言われてもわかりにくいと思います。アマゾンから送られてくる箱で例えてみます。

アマゾンの梱包はボックスモデルと同じ

アマゾンで買い物した商品はアマゾンの箱の中に納められて届きます。

これってまさにボックスモデルですよ！

外付けハードディスクをアマゾン経由で買ったとします。HDDは傷つかないようにクッション材で包まれメーカの箱に入っています。そして、アマゾンで輸送時に箱の中で動いて傷つかないように固定されてアマゾンの箱に入って家に届きます。

これをボックスモデルに当てはめると、HDDはコンテンツです。HDDの箱はボーダーです。HDDと箱の隙間がパディングです。HDDの箱とアマゾンの箱の空間がマージンになります。そしてアマゾンの箱がボックスモデルです。

	ボックスモデル	アマゾンの箱（梱包）
content	文章や写真、グラフなどの内容	商品そのもの
padding	borderとcontentの中間にある余白	商品と箱の隙間やクッション材
border	paddingとmarginの中間の境界線	商品の箱、パッケージ
margin	ボーダーよりも外側の余白	商品とアマゾンの箱の間の空間

どうですか？ボックスモデルはアマゾンの箱だと理解していただけたでしょうか？ホームページはアマゾンの箱（ボックスモデル）が組み合わさってできているんです。

これを基にボックスサイズについて解説します。

ボックスサイズについて

次はCSSのセレクタ・ボックスサイズ（box-sizing）について解説します。

アマゾンの箱（ボックスモデル）のサイズはcontent+padding+border+marginの合計で決まります。ただし、アマゾンの箱の厚みは、概念なので0とします。

box-sizingはボックスのサイズの計算を指定します。

[border-box][content-box]の2つの方法があります。

content-boxはcontentのwidth+padding+border+marginで計算します。

一方のborder-boxはborderまでのwidth+marginで計算します。

ボックスのサイズの大きさは基本は4つの概念の合計（content+padding+border+margin）で表されますが、この計算で使うwidthが何を指しているかで合計の値が変わります。

content-boxと指定されていたらwidthはcontentの横幅、border-boxと指定されたらwidthはborderまでの横幅なります。

商品そのもののサイズの横幅かパッケージに入ったサイズにするかでボックスのサイズが全く変わります。

content-boxとborder-boxの使い方

box-sizingを指定しない場合はcontent-boxがデフォルトで指定されています。

通常、意識するのはborder-boxの場合だと思います。

親要素から子要素が飛び出る場合に子要素を親要素に納めたい時に、border-boxを使うとピッタリと納まります。大きさは％やemなどpx以外にサイズの単位がバラバラの時にも使えます。

私がよく使う場面は、ボーダーを画像やボタンの内側につけたい時にborder-boxを使っています。

問題です

子要素を親要素にピッタリ納めたい

子要素が親要素から飛び出ています。この子要素を親要素に納めるにはどうしたらいいでしょうか？

下記のようにコードが書かれています。

<--! こちらはHTMLです -->
<div id="parent">
 <p>親要素</p>
　<div id="child">
  <p>子要素</p>
  </div>
</div>

/* こちらはCSSです */
#parent {
width : 820px;
height : 220px;
background-color: #ffffcc;
}

#cchild {
border : 5px solid #999999;
width : 820px;
padding : 10px;
}

どうして、これだと子要素は飛び出てしまったと思いますか？

ボックスのサイズはデフォルトではbox-sizing:content-box;と指定されています。

この時のwidthはcontentの横幅を意味します。

そのため子要素のボーダーで囲まれたサイズはwidth+padding+border＝820＋20＋10＝850ピクセルとなり、親要素の大きさ820ピクセル大きくなるため、子要素は親要素から飛び出てしまいました。

そこで、子要素のCSSにbox-sizing:border-box;を追加指定します。

そうすれば、widthはボーダーまで含む大きさとなり、親要素にピッタリ納まります。

content-boxとborder-boxの違いを実際に計算してみましょう

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

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

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

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

問題です

1．CSSにbox-sizing: content-box;と追加指定したときのdivの全体の大きさは？

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

1．CSSにbox-sizing: content-box;と追加指定したときのdivの全体の大きさはいくつになりますか？

div全体の大きさはcontent+padding+border+marginで計算されます。

content-boxプロパティで指定されているためwidthはcontentのサイズとなり、250ピクセルになります。

divの全体の大きさ＝content+padding+border+margin
=250+10*2+5*2+50*2
=250+20+10+100
=380

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

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

border-boxがwidthとなり、サイズは250pxです。

border-boxはcontent+padding+borderの大きさで、そのサイズはwidthですから、つぎのような式がなりたちます。

border-box=width=写真の大きさ+padding+border

250=写真の大きさ＋10＊2＋5＊2

写真の大きさ＝250-(20+10)=250－30＝220
よって、答えは220ピクセルになります。

content-boxにしたときの写真の大きさは250ｐｘなので、content-boxと指定した時の方がcontentの大きさはborder-boxより大きくなります。

＊コーディングとサイト制作の教科書より、本の感想はコチラ