
[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はどちらにも含まれません
border-boxの場合 | content-boxの場合 | |
テキストや画像などの要素 | ○ | ○ |
paddingプロパティ | ○ | × |
borderプロパティ | ○ | × |
marginプロパティ | × | × |
いったん、ここでボックスモデルについて復習しましょう。
ボックスモデルとボックスサイズ

【CSS】汎用性の高い囲み線を作りながら、marginと paddingを覚えようより再びこの画像です。
ボックスモデルはボックスの概念という意味になります。
ボックスは4つからできています。
- 内容:content
- 内側の余白:padding
- 境界線(枠線):border
- 外側の余白:margin
内側と外側を分けるのが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;}と指定したときのボーダーまでのボックスの大きさはいくつになりますか?
一緒に考えてみましょう
1.{box-sizing: border-box;}と指定したとき、写真の大きさはいくつになりますか?
公式を使って考えてみましょう。
border-boxとはborderとpaddingを含めたサイズが要素の大きさ、つまりwidthとなります。
250=写真の大きさ+paddingの幅(10*2)+borderの幅(5*2)
写真の大きさ=250-(20+10)=230
よって、答えは230ピクセルになります。
2.{box-sizing: content-box;}と指定したときのボーダーまでのボックスの大きさはいくつになりますか?
次は、ボックスモデルの大きさを考えます。これは表示サイズ、画面サイズを考えるときに必要になる計算です。「なんか横スクロールバーが表示されるな」「画面が切れるぞ?」となった時に使える計算です。
content-boxのサイズ=width=250
ボーダーまでのボックスの大きさ=要素+padding*2+border*2
=250+10*2+5*2
=250+20+10
=280
よって、答えは280ピクセルになります。
まとめ:content-boxの方が大きくなる

border-boxとcontent-boxでは、大きさがずいぶん変わるのね。
border-boxは中身のサイズを調整してくれるから、レスポンシブデザインのホームページには便利なプロパティだわ!