CSS フレームワークモデルの概要
CSS フレームワークモデルの概要
要素ボックスの最も内側は実際の内容であり、内容を直接囲むのは内余白です。内余白は要素の背景を表示します。内余白の边缘は枠です。枠以外はマージンで、マージンのデフォルトは透明であり、その後の要素を遮りません。
ヒント：背景は、内容と内余白、枠からなるエリアに適用されます。
内余白、枠とマージンはオプションです。デフォルト値は0ですが、多くの要素はユーザーエージェントのスタイルシートでマージンと内余白が設定されます。要素のマージンと内余白を0に設定することで、これらのブラウザのスタイルをオーバーライドできます。これはそれぞれに行うことができますが、ユニバーサルセレクタを使用してすべての要素に設定することもできます：
* {
margin: 0;
padding: 0;
}
CSSでは、widthとheightは内容エリアの幅と高さを指します。内余白、枠とマージンの増加は内容エリアのサイズに影響を与えませんが、要素ボックスの総サイズを増加させます。
ボックスの各側に10ピクセルのマージンと5ピクセルの内余白があると仮定します。この要素ボックスが100ピクセルに達することを望む場合、内容の幅を70ピクセルに設定する必要があります。以下の図を参照してください：
#box {
width: 70px;
margin: 10px;
padding: 5px;
}
ヒント：内余白、枠とマージンは、要素のすべての側に適用できますが、それぞれの側にのみ適用することもできます。
ヒント：マージンは負の値でも可能で、多くの場合、負の値のマージンを使用する必要があります。
ブラウザの互換性
ページに適切なDTDが設定されると、ほとんどのブラウザは上の図に示されるように内容を表示します。しかし、IE 5と6の表示は正しくありません。W3Cの規格によると、要素の内容が占める空間はwidth属性で設定され、内容の周りのpaddingとborderの値は別で計算されます。残念ながら、IE5.Xと6は怪しいモードで独自の非標準モデルを使用しています。これらのブラウザのwidth属性は、内容の幅ではなく、内容、内余白と枠の幅の合計です。
この問題を解決する方法はありますが、現時点で最善の解決策はこの問題を避けることです。つまり、要素に指定された幅を持つ内余白を追加するのではなく、親要素や子要素に内余白や外余白を追加しようと試みます。
用語翻訳
- element: 要素。
- padding: 内余白、あるいは充填と呼ばれることもあります。
- border: 枠線。
- margin: 外余白、あるいは空白や空白エッジと呼ばれることもあります。
codew3cでは、paddingとmarginを統一して内余白と外余白と呼びます。枠線内の空白は内余白、枠線外の空白は外余白です。簡単に覚えられますか：（）
