CSS ボックスモデル

全ての HTML 要素は、ボックスと考えることができます。CSSでは、デザインとレイアウトについて述べる時に、 "ボックスモデル"という用語が使われます。

CSS ボックスモデルは、基本的に、HTML要素の周りをラップするボックスであり、マージン、ボーダー、パディングと、実際のコンテンツから構成されます。

下の画像は、ボックスモデルの説明です:

各部分の説明：

ボックスモデルは、要素の周りにボーダーを追加し、要素との間にスペースを定義することを可能にします。

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

要素の幅と高さ

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

	重要： CSS で要素の width と height プロパティを指定した場合は、単にコンテンツ・エリアの幅と高さだけが設定されます。要素の全サイズを計算するには、パディング、ボーダー、マージンも加えなければなりません。

合計が 350px 幅の <div> 要素のスタイルを設定するものと仮定します：

Assume we want to style a <div> element to have a total width of 350px:

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

計算しましょう：

320px (幅)
+ 20px (左 + 右パディング)
+ 10px (左 + 右ボーダー)
+ 0px (左 + 右マージン)
= 350px

要素の幅の合計は次のように計算されます：

合計の要素幅 = 幅 + 左パディング + 右パディング + 左ボーダー + 右ボーダー + 左マージン + 右マージン

要素の高さの合計は次のように計算されます：

合計の要素の高さ = 高さ + 上パディング + 下パディング + 上ボーダー + 下ボーダー + t上マージン + 下マージン

旧 IE の問題点： バージョン8 以前の IE は、width プロパティにパディングとボーダーを含めてしまいます。この問題を修復するには、HTML に <!DOCTYPE html> を追加してください。