有人可以解释一下利润率下降吗？我觉得它们非常烦人

Question

我有一个包含链接的 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');
}

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

---

Could someone explain these collapsing margins, how to avoid them and what they're used for.

Answer 1

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

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

#like_bar {
    overflow: hidden
}

其他方法包括：

• 添加一些填充
• 添加一个边框（甚至边框：1px固体透明就足够了）
• 浮动元素
• position：absolute
• 并且像上面的代码片段一样，将overflow设置为默认值visible<之外的值/代码>。

---

您还问：

它们的用途

一个常见的用例是

标记。

请参阅： http://jsfiddle.net/thirtydot/tPaTY/

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

Answer 2

因为我很懒，所以我只想链接到一些资源：

我在这里的回答解释了为什么盒子模型是这样的，这与包含边距折叠有关。

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

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