html - シンプルな CSS のマージンが崩れないのはなぜですか?

Question

CSS の余白は隣接すると崩れてしまうので、2 つの要素の周囲を 40px に設定すると、それらの間は 40px になるといつも聞いていました。

これは CSS をレンダリングする古い方法ですか?

これがHTMLとCSSです。マージンを折りたたむことができないようです：

関連する HTML

<div id="header">
    <div id="mainNav" class="navBar">
        <a id="homeLink" class="navBarLinks">Home</a>
        <a id="aboutLink" class="navBarLinks">About</a>
        <a id="articlesLink" class="navBarLinks">Articles</a>
        <a id="portfolioLink" class="navBarLinks">Portfolio</a>
        <a id="contactLink" class="navBarLinks">Contact</a>
        <a id="rssLink" class="navBarLinks">RSS</a>
    </div>
    <div class="infoBar"></div>
</div>

CSS

#header { width: 100% }
.navBar {
    width: 100%;
    height: 24px;
    background-color: #1a1a1a;
    border: 0px solid #404040
}
#mainNav { border-bottom-width: 2px }
.navBarLinks {
    display: block; float: left;
    height: 11px;
    margin: 0 30px;
    background: url(/images/STORMINKsprite.png) no-repeat;
    text-indent: -9999px
}

アドバイスありがとう！