CSS 盒子模型

CSS ボックスモデル (Box Model)

すべてのHTML要素はボックスとみなすことができます。CSSでは、"box model"という用語は設計およびレイアウトの際に使用されます。

CSSボックスモデルは本質的にボックスであり、周囲のHTML要素を包み込みます。それには、マージン、ボーダー、パディング、および実際のコンテンツが含まれます。

ボックスモデルにより、他の要素と周囲の要素のボーダーの間のスペースに要素を配置できます。

以下の画像はボックスモデル(Box Model)を示しています。

各部分の説明：

• Margin(外边距)- ボーダーの外側の領域をクリアします。マージンは透明です。
• Border(边框)- パディングとコンテンツの周囲を囲むボーダー。
• Padding(内边距)- コンテンツの周囲の領域をクリアします。パディングは透明です。
• Content(内容)- ボックスのコンテンツ。テキストと画像を表示します。

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

要素の幅と高さ

重要:CSS要素のwidthプロパティとheightプロパティを指定する場合、コンテンツ領域の幅と高さを設定するだけです。完全なサイズの要素を得るには、パディング、ボーダー、マージンを追加する必要があることを理解してください。

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

自分たちで計算してみましょう：
300px (宽)
+ 50px（左 + 右パディング）
+ 50px（左 + 右ボーダー）
+ 50px（左 + 右マージン）
= 450px

考えてみてください。利用できるスペースが250ピクセルしかないとします。合計幅が250ピクセルの要素を設定しましょう。

最終的な要素の合計幅の計算式は次のとおりです。

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

要素の合計高さの最終的な計算式は次のとおりです。

要素の全高 = 高さ + 上部パディング + 下部パディング + 上ボーダー + 下ボーダー + 上マージン + 下マージン

ブラウザの互換性の問題

ページに適切なDTDが設定されていれば、ほとんどのブラウザは上記の図のようにコンテンツを表示します。しかし、IE 5および6の表示は正しくありません。W3Cの仕様によれば、要素のコンテンツが占めるスペースはwidthプロパティで設定され、コンテンツ周囲のpaddingおよびborderの値は別途計算されます。残念ながら、IE5.Xおよび6は互換モードで独自の非標準モデルを使用します。これらのブラウザのwidthプロパティはコンテンツの幅ではなく、コンテンツ、パディング、ボーダーの幅の合計です。

この問題を解決する方法もありますが、現在のところ最善の解決策はこの問題を回避することです。つまり、指定した幅を持つパディングを要素に追加するのではなく、パディングやマージンを要素の親要素と子要素に追加するようにしてください。

IE8およびそれ以前のIEバージョンは、パディングの幅とボーダーの幅のプロパティ設定をサポートしていません。

IE8およびそれ以前のバージョンの非互換問題を解決するには、HTMLページで <!DOCTYPE html> を宣言するだけで済みます。