为什么我的简单 CSS 边距没有折叠？答案

【问题标题】：Why aren't my simple CSS margins collapsing?为什么我的简单 CSS 边距没有折叠？
【发布时间】：2010-11-25 19:37:22
【问题描述】：

我一直听说 CSS 中的边距在彼此相邻时会塌陷，因此将两个元素设置为周围 40 像素只会导致它们之间只有 40 像素。

这是呈现 CSS 的旧方式吗，因为它不再以这种方式工作了吗？

这是 HTML 和 CSS。我似乎无法让边距崩溃：

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
}

感谢您的建议！

【问题讨论】：

文本缩进是怎么回事：-9999px？我很好奇。
.navBarLinks 全部替换为精灵，但我希望文本存在于可访问性和机器人中，所以我只是将其缩进离开页面。我认为这是标准？还是我使用了一些古老的方法？
我也是……这似乎是一些更大的 html 页面的一部分……
@theIV - 这是一种称为“Phark 方法”的图像替换技术，它可能是 Ian 心目中最流行的方法，至少对于非文本图像替换而言。
好吧，确保我没有使用一些过时的方法。另外，需要注意的是，我认为 Anthony 所说的非文本是指非正文或大段落。

标签： html web margin css

【解决方案1】：

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

【讨论】：

【解决方案2】：

你的答案可以在CSS2.1 specification recommendation找到：

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

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

相关 HTML

CSS