为什么我的简单CSS边距不会崩溃？

Question

我总是听说CSS中的边距会在彼此相邻时崩溃,因此设置两个元素以使其全部为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
}

感谢您的建议!

Answer 1

您的答案可以在CSS2.1规范建议中找到:

在CSS 2.1中,水平边距永远不会崩溃.

因此,根据您编写的代码,每个链接之间的间隔为60px - 每个元素的边距为30px.

您可能想要做的是使用15px水平边距,然后将15px的水平填充添加到包含元素.