CSS

on Note

box-sizing 横幅・高さの対象領域を指定する

通常のボックスモデルでは、width、heightプロパティの値はコンテンツ領域の幅を示します。よって、パディング領域とボーダー領域は、widthとheightで指定された幅の外側に存在することになります。

この仕様だと、webページのレイアウトにおいて不自由な場合も出てきます。paddingとborderを設けた場合、その分も計算に入れてコンテンツ幅を指定しないといけないからです。そこで、この挙動を変えることができるのがbox-sizingプロパティです。

ボックスモデルの考え方とbox-sizingの効果

box-sizingプロパティを使うと、widthとheightで決める幅を、コンテンツ領域だけの幅にするのか、パディング領域とボーダー領域を含む幅にするのかを指定することができます。ボックスのサイズの算出方法を指定するわけです。

通常のボックスモデルではwidth、heightはコンテンツ領域のみに影響します。

ボックスモデルの本来のイメージ
ボックスモデルの本来のイメージ図

box-sizing: border-box;を指定すると、widthとheightを、パディング領域とボーダー領域を含めた形で指定することができます。

box-sizing: border-box;を指定した場合のイメージ
border-boxを指定した場合のイメージ図

コンテンツの幅や高さを指定したいとして、そこにpaddingやborderも指定していた場合、本来はpaddingやborderの値も計算に入れてコンテンツの幅や高さを指定することになります。そうでないとレイアウトが崩れる原因になりますので。

box-sizing: border-box;を指定すると、パディング領域やボーダー領域を含んだ大きさで考えることができるので、レイアウトが容易になります。

box-sizingプロパティの概要

box-sizingプロパティは、横幅や高さを持つ全ての要素に適用することができます。

書式
box-sizing: 値;
継承
しない

使用できる値と、その内容は次の通りです。

content-box
初期値
要素の横幅と高さの指定を、コンテンツ領域に対してとする。
border-box
要素の横幅と高さの指定を、パディング領域とボーダー領域を含めた領域に対してとする。
inherit
親要素の値を継承する。

box-sizingプロパティは、widthやheightを指定したい要素に、同時に指定することになるでしょう。

box-sizing: border-box; を指定しない場合の見本

次のようなHTMLCSSのコードがあったとします。

<div class="sample">
    <p>中略</p>
    <p>中略</p>
</div>
.sample {
    width: 400px;
    height: 200px;
    padding: 10px;
    border: solid 5px #55f;
    background-color: #fdd;
}

div要素の横幅を400px、高さを200pxに指定しました。同時にpaddingとborderも指定しています。

width: 400px;height: 200px;というのはあくまでコンテンツ領域に対しての指定です。div要素全体で見た大きさはそれ以上になっています。paddingとborderの分大きくなっているからです。

上記コードの結果が下です。

「width: 400px;」「height: 200px;」を指定しています。

しかし全体の大きさは、パディング・ボーダーを含めた「横幅 = 430px」「高さ = 230px」になっています。

div要素は、paddingとborderの値も含めた大きさとなりました。もし、div要素の大きさを横400px、高さ200pxにしたいのであれば、widthとheightの数値を、paddingの値とborderの値を差し引いたものにしないといけません。

paddingとborderを指定しながらも、ボックス全体の大きさを横幅400px、高さ200pxにしたいとした時、box-sizing: border-box;を書き足すことで解決します。

box-sizing: border-box; を指定した場合の見本

div要素のスタイルにbox-sizing: border-box;を加えます。

<div class="sample">
    <p>中略</p>
</div>
.sample {
    中略
    box-sizing: border-box;
}

上記コードの結果が下です。

「box-sizing: border-box;」を指定することで、「横幅 = 400px」「高さ = 200px」は、パディングとボーダーを含めたサイズになってます。

box-sizing: border-box;を指定することで、div要素の大きさが、コンテンツ領域だけでなくパディング・ボーダーを含めたものになりました。

まとめ

本来、widthやheightの値はコンテンツ領域にだけ働きかけます。なのでpaddingやborderを指定した場合、実際は、widthやheightにプラスされた大きさになります。

この不都合を解決するのがbox-sizing: border-box;です。box-sizingプロパティで値をborder-boxにすると、パディング領域をボーダー領域も含めた大きさとすることができます。

指定できる値には次の3つがあります。

content-box
初期値
要素の横幅と高さの指定を、コンテンツ領域に対してとする。
border-box
要素の横幅と高さの指定を、パディング領域とボーダー領域を含めた領域に対してとする。
inherit
親要素の値を継承する。