Why aren't my simple CSS margins collapsing?

I've always heard that margins in CSS will collapse when next to each other, so that settings two elements to have 40px all around will only result in 40px between them.

Is this an old way to render CSS, as in does it not work this way anymore?

This is the HTML and CSS. I can't seem to get the margins to collapse:

    <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>

    #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
    }

Your answer can be found in the CSS2.1 specification recommendation:

In CSS 2.1, horizontal margins never collapse.

So given the code you've written, you'll get 60px between each link - 30px for each element's margin.

What you probably want to do is use 15px horizontal margins, and then add 15px of horizontal padding to the containing element.