理解できないmarginの表示

「これが仕様」とは理解し難いおかしなmarginの適用例を紹介します。
CSSに触れる機会のある方は知っておいた方が良いかと。これで飯食ってる人にとっては既知かも知れませんが。

htmlでは以下のように、要素(タグ)がネストしていることは珍しいことではないのですが、子要素に指定したmarginが親要素に適用されるのはどうにも理解出来ない。

<div id="Wrap1">
  <div id="Wrap2">
    <div id="Wrap3">
    </div>
  </div>
</div>

上記の構造の要素に対してスタイルを指定してみます。
右の例ではWebページの表示上では一番上となる要素であるWrap3のTopにmarginを10px指定した例です。

IEとその他のブラウザで表示に違いがあります。IEでは子要素に指定したmarginがその親要素のみ影響されますが、その他のブラウザでは子要素が属する親要素全てが影響されます。

Wrap3の親要素であるWrap2,その親要素であるWrap1にまでmarginが適用されています。もちろんWrap2,Wrap1にはmarginは指定していません。これだけでも理解できないのですが、更にWrap2にborderを指定するとWrap2とWrap1にmarginが適用されなくなるということです。

IEではmarginを指定してるWrap3までmarginが無効になっています。

IEでは例の如く、他のブラウザとは異なる表示をします。それを含めてこのborderを指定するとmarginが無効になることがあるということをどれだけ知られているのでしょうか。