CSSボックスモデル

すべてのHTML要素は、ボックスとみなすことができます。デザインとレイアウトについて話したときに、CSSでは、用語「ボックスモデル」が使用されます。

CSSボックスモデルは、基本的にすべてのHTML要素を包み込むボックスです。マージン、ボーダー、パディング、および実際の内容：それは構成されています。

下の画像は、ボックスモデルを示しています。

さまざまな部分の説明：

ボックスモデルは、私たちは要素の周囲に境界線を追加して、要素間のスペースを定義することができます。

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

幅と要素の高さ

すべてのブラウザで正しく要素の幅と高さを設定するには、ボックスモデルがどのように動作するかを知る必要があります。

	重要：あなたはCSSで要素の幅と高さのプロパティを設定すると、あなただけのコンテンツ領域の幅と高さを設定します。要素のフルサイズを計算するために、あなたはまた、パディング、ボーダーとマージンを追加する必要があります。

私たちはスタイルしたいと<div> 350pxの幅の合計を持っている要素を：

div {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0;
}

ここでは、数学は、次のとおりです。

320px （幅）
+ 20px （左+右パディング）
+ 10px （左+右境界）
+ 0px （左+右マージン）
= 350px

要素の幅の合計は次のように計算されるべきです：

総素子幅=幅+左パディング+右パディング+左ボーダー+右境界線+左マージン+右マージン

要素の全体の高さは、次のように計算されるべきです：

総要素の高さ=高さ+上部パディング+ボトムパディング+上部の境界線+下罫線+上マージン+下マージン

	古いIEのための注意：Internet Explorer 8の以前のバージョンでパディングとボーダーを含むwidthプロパティ。この問題を解決するには、追加<!DOCTYPE html> HTMLページに。