title: Why aren't my simple CSS margins collapsing?
body: <p>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.</p>
  
  <p>Is this an old way to render CSS, as in does it not work this way anymore?</p>
  
  <p>This is the HTML and CSS. I can't seem to get the margins to collapse:</p>
  
  <h3>Relevant HTML</h3>
  
  <pre><code>&lt;div id="header"&gt;
      &lt;div id="mainNav" class="navBar"&gt;
          &lt;a id="homeLink" class="navBarLinks"&gt;Home&lt;/a&gt;
          &lt;a id="aboutLink" class="navBarLinks"&gt;About&lt;/a&gt;
          &lt;a id="articlesLink" class="navBarLinks"&gt;Articles&lt;/a&gt;
          &lt;a id="portfolioLink" class="navBarLinks"&gt;Portfolio&lt;/a&gt;
          &lt;a id="contactLink" class="navBarLinks"&gt;Contact&lt;/a&gt;
          &lt;a id="rssLink" class="navBarLinks"&gt;RSS&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class="infoBar"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h3>The CSS</h3>
  
  <pre><code>#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
  }
  </code></pre>
  
  <p>Thanks for the advice!</p>