CSS ボックスモデル

CSS ボックスモデルは、HTML 要素のレイアウトやスペーシングを制御するための基本的な概念です。

ボックスモデルは、要素のcontent、padding、border、およびmarginから構成されています。次の章からそれぞれ具体的に解説します。

ボックスモデルの構成要素

以下の例では、ボックスモデルを使用して、段落要素のレイアウトを設定します。

p {
  width: 300px;
  background-color: lightgray;
  padding: 20px;
  border: 2px solid black;
  margin: 40px;
}

この例では、段落要素のコンテンツ幅を300pxに設定し、背景色を薄いグレーにしています。paddingは20px、borderは2pxの実線で黒、marginは40pxに設定されています。

以下の要素の幅は450pxです。

300+25*2+25*2+25*2=450


div {
    width: 300px;
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

デフォルトでは、要素の幅と高さはコンテンツのサイズに基づいて決まります。しかし、box-sizing プロパティを使用すると、要素のサイズの計算方法を変更できます。

content-box は CSS のデフォルトのボックスサイズ計算方法です。

この方法では、要素の幅と高さは、コンテンツ領域のサイズのみを指定します。padding、border、およびmarginは、要素のサイズには含まれません。

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 2px solid black;
  margin: 10px;
  box-sizing: content-box;
}

この例では、.box 要素の幅と高さは、コンテンツ領域のサイズである 200px × 100px になります。

padding、border、marginは、要素のサイズには影響しません。そのため、要素の全体的な外観の幅と高さは、それぞれ 244px（200px + 20px * 2 + 2px * 2）× 144px（100px + 20px * 2 + 2px * 2）となります。

border-box は、要素の幅と高さがコンテンツ領域に加えて、paddingとborderを含む方法です。marginは含まれません。これにより、要素のサイズが予測しやすくなり、レイアウトの制御が容易になります。

.box {
  width: 200px;
  height: 100px;
  padding: 20px;
  border: 2px solid black;
  margin: 10px;
  box-sizing: border-box;
}

この例では、box-sizing: border-box を適用した要素の幅と高さは、paddingとborderを含む 200px × 100px になります。

コンテンツ領域のサイズは、幅 156px（200px – 20px * 2 – 2px * 2）、高さ 56px（100px – 20px * 2 – 2px * 2）となります。

content-box と border-box の違いは、要素の幅と高さの計算方法にあります。

ブラウザーの標準のボックスモデルはcontent-boxですが、今の主流はborder-boxです。

すべての要素にbox-sizing:border-box;は先に記述する方法もあります。

/* すべての要素のボックスモデルをborder-boxにする */
*,*::before,*::after {
    box-sizing: border-box;
}