スポンサーリンク

【CSS】border-boxとcontent-boxの違い|どちらが大きくなる?

ボックスサイズ:お裁縫箱HP制作

[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プロパティ××
widthとheightに含まれるプロパティ

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

ボックスモデルとボックスサイズ

ボックスモデルの図

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

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

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

  1. 内容:content
  2. 内側の余白:padding
  3. 境界線(枠線):border
  4. 外側の余白: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は中身のサイズを調整してくれるから、レスポンシブデザインのホームページには便利なプロパティだわ!

タイトルとURLをコピーしました