CSS ボックス モデル (簡単に理解)_html/css_WEB-ITnose

CSSでは、ボックスモデルはボックスモデル（またはボックスモデル）と呼ばれ、要素ボックスが要素のコンテンツ、パディング、ボーダー、マージンをどのように処理するかを指定します。 HTML ドキュメントでは、各要素にボックス モデルがあるため、Web の世界 (特にページ レイアウト) では、ボックス モデルがどこにでもあります。以下は、ボックス モデルの図です:

： 上の図では、内側から外側に向かって、要素コンテンツ (content)、内部モーメント (padding-top、padding-right、padding-) の順です。ボトム、パディング左）、ボーダー（ボーダー上、ボーダー右、ボーダー下、ボーダー左）、マージン（マージン上、マージン右、マージン下、マージン左）。

パディング、ボーダー、マージンは、要素のすべての辺に適用することも、個々の辺に適用することもできます。さらに、マージンは負の値になる可能性があり、多くの場合、負のマージンが使用されます。

次の図は W3School のボックス モデルの図です:

Box-Model 2 (W3School)

説明:

1. 最初の図と同様に、上の図では、要素ボックスの最も内側の部分は実際のコンテンツ (要素) は、要素の背景を示すパディングです。境界線の外側はマージンです。マージンはデフォルトで透明です。後続の要素をブロックします (実際、要素のマージンは親要素のパディングです)。要素の背景は、コンテンツ、パディング、境界線で構成される領域に適用されます。

2. パディング、ボーダー、マージンはすべてオプションであり、デフォルト値はゼロです。ただし、多くの要素には、ユーザー エージェント スタイル シートによって設定されたマージンとパディングが含まれます。これらのブラウザ スタイルは、要素のマージンとパディングをゼロに設定することでオーバーライドできます。これは、ユニバーサル セレクター (*) を使用して個別に行うことも、すべての要素に対して行うこともできます:

/*设置所有元素的外边距和内边矩为0*/* {  margin: 0;  padding: 0;}

3. CSS では、幅と高さはコンテンツ領域 (要素) の幅と高さを指します。パディング、境界線、余白を増やしてもコンテンツ領域のサイズには影響しませんが、要素のボックス全体のサイズは大きくなります。ボックスの両側に 10 ピクセルのマージンと 5 ピクセルのパディングがあると仮定します。この要素ボックスを 100 ピクセルにしたい場合は、コンテンツの幅を 70 ピクセルに設定する必要があります。 CSS コードは次のとおりです。

#box {  width: 70px;  margin: 10px;  padding: 5px;}

次の図は、上記の CSS コードの説明です。

以下は、CSS ボックス モデル レイアウトの完全な例です。

コードの表示

以下は上記の例のスクリーンショットです:

参考: http://www.w3school.com.cn/css/css_boxmodel.asp