有人能解释一下边际萎缩的原因吗?我觉得他们非常烦人

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');
}

链接被放置在该条的顶部，链接的边距应用于该条。
这很烦人。

---

有人能解释一下这些缩边距，如何避免它们以及它们的用途吗?

Answer 1

有很多方法可以"修复"。

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

#like_bar {
    overflow: hidden
}

其他方式包括:

• 添加padding
• 添加border(即使border: 1px solid transparent也足够)
• float元素
• position: absolute
• 并且，像上面的代码片段一样，将overflow设置为visible以外的默认值。

---

你还问:

它们的用途

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

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

Answer 2

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

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

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

将CSS视为以内容为中心的内部→out方法，而不是编程的外部→in方法。