14

我一直听说 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
}

感谢您的建议！

4

3 回答 3

43

您的答案可以在CSS2.1 规范推荐中找到：

在 CSS 2.1 中，水平边距永远不会塌陷。

因此，鉴于您编写的代码，您将在每个链接之间获得 60 像素 - 每个元素的边距为 30 像素。

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

于 2009-09-05T02:18:31.500 回答
3

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

于 2009-09-05T02:17:52.340 回答
2

如果您有 2 个元素，所有 4 边的边距为 40px，那么这两个元素之间的间隙将为 80px。

于 2009-09-05T02:22:33.113 回答