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