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 specification recommendation：

中找到

在CSS 2.1中，水平边距永远不会崩溃。

所以考虑到你编写的代码，你会在每个链接之间获得60px - 每个元素的边距为30px。

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

Answer 2

我不知道IE上目前发生了什么，但是如果你浮动两个元素并且第一个元素margin-right: 30px;和第二个元素margin-left: 30px;，则两者之间将有60像素。所以，我相信它不会崩溃。

Answer 3

如果你有4个元素，所有4个边都有40px边距，那么这两个元素之间的差距将是80px。

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

相关HTML

CSS

3 个答案: