有人可以解释崩溃的边距吗？我觉得他们非常烦人答案

【问题标题】：Could someone explain collapsing margins? I find them extremely annoying有人可以解释崩溃的边距吗？我觉得他们非常烦人
【发布时间】：2011-04-13 06:06:26
【问题描述】：

我有一个包含链接的 div：

<div id="like_bar"><a href="#" onclick="return false;" id="like"></a></div>

使用一些 CSS：

#like_bar{
    width:140px;
    height:26px;
    background:url('bar.jpg');
}
#like{
    display:block;
    width:20px;
    height:20px;
    margin:3px 36px;
    background:url('mini_img.png');
}

链接放置在栏的顶部，链接上的边距应用于栏。
这很烦人。

谁能解释这些折叠边距，如何避免它们以及它们的用途。

【问题讨论】：

我不确定您所说的折叠边距是什么意思。你有它的外观截图吗？它是在#like 上填充你的 after 而不是 Margin 吗？
参考：w3.org/TR/CSS21/box.html#collapsing-margins
在这里阅读它们：w3.org/TR/CSS21/box.html#collapsing-margins
哈哈！这很有趣。在我看到你之前，我发布了与你完全相同的链接。

标签： html css margin

【解决方案1】：

有很多方法可以“解决这个问题”。

也许对你来说最简单的是：

#like_bar {
    overflow: hidden
}

其他方式包括：

添加一些padding
加一个border（即使border: 1px solid transparent也够了）
float元素
position: absolute
并且，与上面的 sn-p 一样，将 overflow 设置为默认值 visible 以外的值。

你还问过：

它们的用途

一个常见的用例是<p> 标签。

见：http://jsfiddle.net/thirtydot/tPaTY/

如果没有边距折叠，某些事情会变得烦人。

【讨论】：

【解决方案2】：

因为我比较懒，所以只链接一些资源：

My answer here 解释了为什么盒子模型是这样的，这与包含边距折叠有关。

w3c css spec 定义了边距折叠的行为。考虑到盒子模型，这是为了方便起见的预期行为。您无需担心内容块之间的双倍边距。听起来你实际上想要的是#like 周围的一些填充，而不是边距。

将 CSS 视为一种以内容为中心的内部→外部样式方法，而不是编程的外部→内部方法。

【讨论】：