为什么要使用负边际？

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和-25px的保证金？

Answer 1

我开始输入答案，然后发现一个更好的here（Wayback Machine backup）。一些重点：

负边距：

• 是有效的CSS
• 不破坏页面流程
• 具有高级别的跨浏览器兼容性（尽管如果它们破坏了您的链接或浮动图像，那么请尝试添加position：relative;这应该修复它）

它们对未开发元素的影响：

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

它们对浮动元素的影响：

• 这个更复杂，我无法总结它比文章更好。在Firebug玩一玩，感受一下。

在该文章中有一些使用负边距的精彩示例（特别是3列布局！Magic。之前我曾使用a similar technique进行页面布局。）我发现它们最常见的用途只是移动一个元素来修正它的位置，并使一个元素与另一个元素重叠以获得视觉效果。

Answer 2

许多技巧和好的效果使用负边距：

图像替换技巧 - 当您想要使用该特定字体并且您无法撕掉它时，图像替换就是一招。使用负边距推出常规字体并将其替换为“图片”字体。

带有边框的图像翻转 - 为图像提供负边距，与边框大小相同的像素大小将保持图像，从而保持布局在翻转时移动。

中心屏幕定位 - 使用与您想要居中的对象的高度和宽度相同的负边距，您可以将对象置于浏览器中间。

Answer 3

如果您想要其他元素“周围”，则负边距可能会有所帮助，例如有一个填充所有其他元素。我经常使用它，在这里阅读，原因： http://www.simplebits.com/notebook/2005/05/23/negative.html

Answer 4

实际上我认为有一个用例，负边距是唯一正确的做法：

您希望框的一部分扩展到整个父级，甚至是填充。因此，不是删除父元素的填充，而是将其应用于针对您的特殊情况执行的所有子元素，而是为您的特殊情况提供负边距。也没有定位讨价还价。效果很好，非常易读。

示例：http://codepen.io/anon/pen/DpHvu