【CSS】要素の大きさをどのように計算するかを指定するborder-box

要素を一つの箱(box)として捉えたとき、箱の大きさ(size)をどのように計算するかを指定する属性がbox-sizing属性です。

計算方法には2つの選択肢があります。

  • 要素の内容のみで計算する方法
  • 要素の内容および境界線や内側の余白を含めて計算する方法
要素の内容(content)、境界線(border)、内側の余白(padding)は次の画像のとおりです。

要素の内容のみで計算

要素の内容のみで計算する方法では、width: 100pxと指定すると要素の内容(content)の部分が100pxになります
もしborder属性やpadding属性に有効な値を指定していれば、この要素の大きさは100px + borderサイズ + paddingサイズと計算されます。

要素の内容および境界線や内側の余白を含めて計算

同じ様に、width: 100pxと指定すると境界線(border)と内側の余白(padding)を含んで100pxとなります
もしborder属性に左右2pxずつ、padding属性に左右8pxずつ指定していると、要素の内容は100px - (2 * 2px) - (2 * 8px)という計算で割り当てられます。

理解度チェック

  • box-sizing属性は何の計算方法について指定する属性ですか?

content-boxを指定する

border-box属性にcontent-boxを指定すると、要素の内容のみで計算する方法となります。

content-box初期値です。

まず先に、子要素にborder属性とpadding属性を指定しない場合の例をみてください。


.wrapper {
    width: 200px;
    height: 150px;
    text-align: center;
    /* 境界線を指定します。 */
    border: solid 8px orange;
}

.wrapper div {
    width: 100%;
    height: 100px;
    /* 初期値のため省略できます。 */
    box-sizing: content-box;
}
        

<div class="wrapper">
    親要素
    <div style="background-color: yellow;">
        子要素
    </div>
</div>
    
親要素
子要素

続いて、子要素にborder属性とpadding属性を指定してみましょう。


.wrapper {
    width: 200px;
    height: 150px;
    text-align: center;
    /* 境界線を指定します。 */
    border: solid 8px orange;
}

.wrapper div {
    width: 100%;
    height: 100px;
    /* 追加します。 */
    padding: 8px;
    border: solid 8px green;
    /* 初期値のため省略できます。 */
    box-sizing: content-box;
}
        

<div class="wrapper">
    親要素
    <div style="background-color: yellow;">
        子要素
    </div>
</div>
    
親要素
子要素

要素の内容は100%ですが、そこに左右のborder属性の値8pxpadding属性の値8pxが加算され、要素の大きさは100% + (8px * 2) + (8px * 2)となります。

結果として100%より大きくなってしまうので、親要素から枠外にはみ出て表示されているというわけです。

理解度チェック

  • content-boxにはどの様な特徴がありますか?
  • content-boxはどんなときに活かせますか?

border-boxを指定する

border-box属性にborder-boxを指定すると、要素の内容に加え、境界線や内側の余白を含んで計算する方法となります。

多くの場合、このborder-boxを使用します。

同じ様に、まず先に、子要素にborder属性とpadding属性を指定しない場合の例をみてください。


.wrapper {
    width: 200px;
    height: 150px;
    text-align: center;
    /* 境界線を指定します。 */
    border: solid 8px orange;
}

.wrapper div {
    width: 100%;
    height: 100px;
    /* 初期値からborder-boxに変更します。 */
    box-sizing: border-box;
}
        

<div class="wrapper">
    親要素
    <div style="background-color: yellow;">
        子要素
    </div>
</div>
    
親要素
子要素

この状態だと、初期値のcontent-boxと差異はありません。

続いて、子要素にborder属性とpadding属性を指定してみましょう。


.wrapper {
    width: 200px;
    height: 150px;
    text-align: center;
    /* 境界線を指定します。 */
    border: solid 8px orange;
}

.wrapper div {
    width: 100%;
    height: 100px;
    /* 追加します。 */
    padding: 2rem;
    border: solid 8px green;
    /* 初期値からborder-boxに変更します。 */
    box-sizing: border-box;
}
        

<div class="wrapper">
    親要素
    <div style="background-color: yellow;">
        子要素
    </div>
</div>
    
親要素
子要素

要素の大きさが境界線のborder属性と内側余白のpadding属性を含めて計算されるため、width: 100%;とすることで、親要素の大きさを上回ることなく配置することができます。

このような特徴から、初期値のcontent-boxよりborder-boxを使用する機会は多くなります。
そのため最初にすべての要素のbox-sizing属性をborder-boxに指定する次のようなCSSが用いられます。


* {
    box-sizing: border-box;
}
        

理解度チェック

  • border-boxにはどの様な特徴がありますか?
  • border-boxを指定することでなぜレイアウトがしやすくなるのですか?考えてみましょう!

前のレッスン
次のレッスン

Twitterでアウトプット

理解したことや分からないところはTwitterでつぶやいてみよう!

この学習ページで学んだことをTwitterでアウトプットしてください。

アウトプットするメリット

学習仲間が増える

同じ課題を持った仲間が増えるため、学習へのモチベーションが継続しやすくなります。

より深く理解する

頭では理解したと思っていても、文章化することで初めて気づくことがあります。