CSS 外边距合并
マージン合併とは、2つの垂直外側マージンがぶつかったとき、それらが1つのマージンとして形成されることを指します。
合併したマージンの高さは、合併する2つの外側マージンの高さの中で大きい方です。
マージン合併
マージン合併（重ね合わせ）は非常にシンプルな概念ですが、実際にウェブページのレイアウトを行う際には、多くの混乱を引き起こします。
簡単に言えば、マージン合併とは、2つの垂直外側マージンがぶつかったとき、それらが1つのマージンとして形成されることを指します。合併したマージンの高さは、合併する2つの外側マージンの高さの中で大きい方です。
ある要素が別の要素の上に現れる場合、最初の要素の下外側マージンと第二の要素の上外側マージンが合併します。以下の図を参照してください：
ある要素が別の要素に含まれている場合（内側マージンや枠が外側マージンを分ける場合を除いて）、それらの上と/または下外側マージンも合併します。以下の図を参照してください：
見た目は少し奇妙かもしれませんが、マージンは自体も合併することができます。
空の要素が外側マージンがあり、しかし枠やフィルルを持ちません。この場合、上外側マージンと下外側マージンが当たって、合併が発生します：
この外側マージンが別の要素の外側マージンに当たると、さらに合併が発生します：
これが、一連の段落要素が非常に小さいスペースを占める理由です。なぜなら、すべての外側マージンが合併して、小さなマージンが形成されるからです。
マージン合併は最初は少し奇妙に見えるかもしれませんが、実際には意味があります。いくつかの段落で構成された典型的なテキストページを例に取ります。最初の段落の上のスペースは段落の上外側マージンに等しいです。マージン合併がなければ、続くすべての段落間のマージンは隣接する上外側マージンと下外側マージンの和になります。これは、段落間のスペースがページのトップの2倍になることを意味します。マージン合併が発生すると、段落間の上外側マージンと下外側マージンが合併して、各所の距離が一致します。
注記：通常のドキュメントフロー中のブロックフレームの垂直外側マージンのみがマージン合併が発生します。インラインフレーム、フロートフレーム、絶対位置のインラインフレーム間のマージンは合併しません。
すべての CSS 外側マージン属性
| 属性 | 描述 |
|---|---|
| 属性 | 説明 |
| margin | 外側マージン属性を一条の宣言で設定するショートカット属性です。 |
| margin-left | 要素の左外側マージンを設定します。 |
| margin-right | 要素の右外側マージンを設定します。 |
| margin-top | 要素の上外側マージンを設定します。 |
