css - 为什么使用负边距？

Question

只要看看这里的一些 CSS，我就注意到了:

.head{position:relative;overflow:hidden;margin:-30px 0 0 -25px;width:820px;padding:20px 25px 0 25px;background:url(/images/bkg.gif) 0 0 no-repeat;}

为什么要放置 -30 和 -25 像素的边距？

Answer 1

我开始输入答案，然后找到一个更好的答案 here (Wayback Machine backup)。一些要点:

负边距:

• 是有效的 CSS
• 不要打断页面流
• 具有高水平的跨浏览器兼容性(尽管如果它们破坏了您的链接或 float 图像，请尝试添加 position: relative；这应该可以解决问题)

它们对非 float 元素的影响:

• 将它们应用到元素的顶部或左侧会将该元素“拉”到适当的方向
• 但是，将它们应用到元素的底部或右侧会将紧接着的后续元素“拉”到其中，使它们重叠

它们对 float 元素的影响:

• 这更复杂，我不能比这篇文章更好地总结它了。在 Firebug 中玩一玩，感受一下。

在那篇文章中有一些使用负边距的精彩示例(尤其是 3 列布局!魔术。我之前使用 a similar technique 进行页面布局。)我发现它们最常见的用法是少量移动元素以校正其位置，并使一个元素与另一个元素重叠以获得视觉效果。