css ボックス モデル (基本的に互換性の問題に役立ちます)_html/css_WEB-ITnose

(1). CSS ボックス モデルは、要素ボックスが要素のコンテンツ、パディング、境界線、余白を処理する方法を指定します。

1. スタイルを変更し、デフォルト値をフォーマットします:

margin: 0;

}

2. マージンの結合 マージンマージ (オーバーラップ) は非常に単純な概念です。ただし、実際に Web ページをレイアウトする場合、多くの混乱を引き起こす可能性があります。

簡単に言えば、マージンの結合とは、2 つの垂直マージンが交わると 1 つのマージンを形成することを意味します。マージされたマージンの高さは、マージされた 2 つのマージンの高さの大きい方に等しくなります。 要素が別の要素の上に表示される場合、最初の要素の下マージンと 2 番目の要素の上マージンがマージされます。下の図を見てください:

3. ボックス モデルの概要:

4. 要素が別の要素内に含まれている場合 (余白を区切るパディングや境界線がないと仮定して)、その Top と/または下マージンもマージされます。下の画像を見てください:

少し奇妙に見えますが、マージンはマージン自体とマージすることもできます。

5. 余白はあるが、境界線やパディングがない空の要素があるとします。この場合、上のマージンと下のマージンが一緒になってマージされます:

これが、一連の段落要素が占めるスペースが非常に少ない理由です。すべてのマージンが Together にマージされ、小さなマージンが形成されるからです。

6. マージンの結合は最初は少し奇妙に思えるかもしれませんが、実際には理にかなっています。たとえば、いくつかの段落で構成される典型的なテキスト ページを考えてみましょう。最初の段落の上のスペースは、段落の上マージンと同じです。マージンを結合しない場合、後続のすべての段落間のマージンは、隣接する上マージンと下マージンの合計になります。これは、段落間のスペースがページの上部の 2 倍であることを意味します。マージンのマージが発生すると、段落間の上下のマージンがマージされ、どこでも距離が一定になります。