CSS Web ページをレイアウトするときに、多くの奇妙な問題が発生します。これらの問題は、ブラウザのバグまたは CSS プロパティの理解不足が原因である可能性があります。この記事では、CSS マージン オーバーレイの問題について説明します。 マージンの結合とは、2 つの垂直マージンが結合して 1 つのマージンを形成することを意味します。マージされたマージンの高さは、マージされた 2 つのマージンの高さの大きい方に等しくなります。マージンのマージ (オーバーラップ) は非常に単純な概念です。ただし、実際に Web ページをレイアウトするとなると、多くの混乱が生じる可能性があります。 要素が別の要素内に含まれている場合 (マージンを区切るパディングや境界線がないと仮定して)、それらの上マージンおよび/または下マージンもマージされます。下の写真を見てください。 奇妙に思えるかもしれませんが、マージンはマージン自体と融合することさえあります。 余白はあるが、境界線やパディングがない空の要素があるとします。この場合、上のマージンと下のマージンがぶつかり、マージされます。 このマージンが別の要素のマージンに遭遇した場合、それもマージされます。 一連の段落要素が占めるスペースがほとんどないのは、すべての余白がマージされて小さな余白が形成されるためです。 マージンの結合は最初は少し奇妙に思えるかもしれませんが、実際には理にかなっています。たとえば、いくつかの段落で構成される典型的なテキスト ページを考えてみましょう。最初の段落の上のスペースは、段落の上マージンと同じです。マージンを結合しない場合、後続のすべての段落間のマージンは、隣接する上マージンと下マージンの合計になります。これは、段落間のスペースがページの上部の 2 倍であることを意味します。マージンのマージが発生すると、段落間の上下のマージンがマージされ、どこでも距離が一定になります。 マージンの結合は、通常のドキュメント フローのブロック ボックスの垂直マージンに対してのみ発生します。インライン ボックス、フローティング ボックス、または絶対配置ボックス間のマージンはマージされません。
要素が別の要素の上に表示される場合、最初の要素の外側の下端
