マージン(margin)が隣接していると、長い方が採用され、短い方が無視される。
「マージン相殺」である。

「マージン相殺」は垂直方向(縦方向)でのみ起こり、
水平方向(横方向)では起きない。

以下の二つの種類がある。(以下の図は便宜上90度回転している(本来は縦向き))
┌─────────┬──────────────┐
│                  │┌─────┐  ┌────┐│
│                  ││├→      │  │├→    ││
│(隣接)マージン相殺││          │⇒│        ││
│                  ││    ←─┤│  │ ←─┤ ││
│                *1│└─────┘  └────┘│
├─────────┼──────────────┤
│                  │┌─────┐  ┌────┐│
│                  ││├→      │  │├→    ││
│入れ子マージン相殺││          │⇒│        ││
│                  ││   ├─→ │  │├─→  ││
│                *2│└─────┘  └────┘│
└─────────┴──────────────┘
  *1：float同士の場合は相殺が起こらない
  *2：float同士の場合は相殺が起こらない
      また、親要素に「padding」「border」 が含まれているか
      「overflow:hidden」、「overflow:scroll」か
      「position:absolute」、「position:fixed」かの場合にも
      相殺が起こらない

例えば、以下のような入れ子の場合…
┌──────────────────────────────────────┐
│div#外側 {                                                                  │
│    height              :4em;                                               │
│    width               :4em;                                               │
│}                                                                           │
│div#内側 {                                                                  │
│    height              :2em;                                               │
│    width               :2em;                                               │
│    margin              :1em;                                               │
│}                                                                           │
└──────────────────────────────────────┘
以下のようなイメージになる。
┌──────────────────────────────────────┐
│                                                                            │
│┌─┬─┬─┐                                                              │
││  │  │  │                                                              │
││  └─┘  │                                                              │
││          │                                                              │
│└─────┘                                                              │
└──────────────────────────────────────┘
縦方向は外側「margin:0;」と内側「margin:1em;」が操作されて
「margin:1em;」となる(外側から見た場合「相殺」とイメージではないが相殺だ)。
内側は外側が「margin:0;」のまま、内側が「margin:1em;」のままなので
センタリングされたような形になる。