CSS
ボックスモデル

構文

• box-sizing： パラメータ 。

パラメーター

備考

ボックスモデルとは何ですか？

エッジ

ブラウザは、HTMLドキュメント内の各要素の矩形を作成します。ボックスモデルは、パディング、ボーダー、およびマージンをコンテンツに追加してこの矩形を作成する方法を示します。

CSS2.2作業草案からの図

4つの領域のそれぞれの周囲はエッジと呼ばれます 。各辺はボックスを定義します。

• 一番内側の矩形はコンテンツボックスです。これの幅と高さは、要素のレンダリングされた内容（テキスト、イメージ、およびそれが持つ可能性のある子要素）によって異なります。
• 次に、 paddingプロパティで定義されている、 パディングボックスです。 padding幅が定義されていない場合、パディングエッジはコンテンツエッジに等しくなります。
• 次に、 borderプロパティで定義されているborderボックスがborderます。 border幅が定義されていない場合、境界エッジはパディングエッジに等しくなります。
• 最も外側の矩形はmarginプロパティで定義されているmarginボックスです。 margin幅が定義されていない場合、マージンエッジはボーダーエッジに等しくなります。

例

div {
    border: 5px solid red;
    margin: 50px;
    padding: 20px;
}

このCSSは、すべてのdiv要素のスタイルを5px幅の上、右、下、左の境界線に5pxします。 50px上下左右の余白。 20px上、右、下、左のパディングがあり20px 。コンテンツを無視すると、生成されるボックスは次のようになります：

Google Chromeの要素スタイルパネルのスクリーンショット

• コンテンツがないため、コンテンツ領域（中央の青いボックス）には高さや幅がありません（0px x 0px）。
• デフォルトでは、パディングボックスはコンテンツボックスと同じサイズですが、 paddingプロパティ（40ピクセル×40ピクセル）で上で定義している4つのエッジの20ピクセル幅に加えて、
• 境界ボックスは、パディングボックスと同じサイズに、 borderプロパティ（50px x 50px）で上で定義した5px幅を加えたものです。
• 最後に、マージンボックスは、ボーダーボックスと同じサイズと、 marginプロパティで上で定義している50ピクセル幅（合計150ピクセル×150ピクセル）になります。

さて、私たちの要素に同じスタイルの兄弟を与えましょう。ブラウザは、両方の要素のBox Modelを調べて、前の要素のコンテンツとの関係で新しい要素を配置する場所を確認します。

各要素の内容は150ピクセルの間隔で区切られていますが、2つの要素のボックスは互いに接触しています。

最初の要素を右マージンを持たないように変更すると、右マージンエッジは右ボーダーエッジと同じ位置になり、2つの要素は次のようになります。

ボックスサイズ

デフォルトのボックスモデル（ content-box ）は、直感的ではありません。エレメントのwidth / heightは、エレメントにpaddingとborderスタイルを追加するとすぐに画面上の実際の幅や高さを表しません。

次の例は、 content-boxこの潜在的な問題を示していcontent-box 。

textarea {
    width: 100%;
    padding: 3px;
    box-sizing: content-box; /* default value */
}

パディングはテキストエリアの幅に追加されるので、結果の要素は100％より広いテキストエリアになります。

幸いにも、CSSは、要素のbox-sizingプロパティでボックスモデルを変更することを可能にします。使用可能なプロパティには3つの異なる値があります。

• content-box ：共通ボックスモデル - 幅と高さにはコンテンツのみが含まれ、パディングや境界線は含まれません。

• padding-box ：幅と高さにコンテンツとパディングが含まれますが、境界線は含まれません。

• border-box ：幅と高さには内容、詰め物、境界線が含まれます

上記のtextarea問題を解決するには、 box-sizingプロパティをpadding-boxまたはborder-box変更するだけです。 border-boxが最も一般的に使用されます。

textarea {
    width: 100%;
    padding: 3px;
    box-sizing: border-box;
}

ページ上のすべての要素に特定のボックスモデルを適用するには、次のスニペットを使用します。

html {
    box-sizing: border-box;
}

*, *:before, *:after {
    box-sizing: inherit;
}

このコーディングbox-sizing:border-box;直接*は適用されないため、個々の要素に対してこのプロパティを簡単に上書きすることができます。