为什么使用负边距？

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
• 不破页面流
• 有高水平的跨浏览器兼容的（尽管如果他们打破你的链接或然后尝试添加位置：相对;应该修复它）

它们对未悬浮的麝香葡萄酒的影响NTS：

• 它们应用到顶部或左侧元件的“拉”在适当的方向（多个）
• 该元素然而，把它们应用到一个元件的底部或右“拉”立即后续元素放进去，使它们重叠

及其对浮动元素的效果：

• 这是更复杂，我不能总结比文章更好。在Firebug中玩一玩，感受他们。

有负保证金使用的一些光辉的榜样那篇文章（尤其是三栏布局！魔术队。我为页面布局之前使用a similar technique）。对他们来说，最常见的用法，我发现在只是为了移动一个元素来修正它的位置，并且为了视觉效果使一个元素重叠。

Answer 2

负利润率会有所帮助，当你有其他元素“围绕”要如有所有其他元素的填充。我经常用它，读到这里，为什么： http://www.simplebits.com/notebook/2005/05/23/negative.html

Answer 3

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

图片更换绝招 - 当你想使用特定的字体，你就是不能撕掉它，图像替换是诀窍。使用负边距推出常规字体并将其替换为“图片”字体。

带边框图像翻转 - 以像素为边界大小给予负缘至图像相同的大小将保持图像，因此，布局，从上翻转移位。

中心屏幕定位 - 使用负利润率尺寸相同的高度，要居中的对象的宽度，你可以在浏览器的中间居中的对象。

Answer 4

其实我觉得有一个用例，其中切缘阴性是唯一正确的事情：

你想要一个盒子的一部分延伸到整个父，甚至超过了填充。因此，不要删除父元素的填充值，而是将其应用于所有孩子，以免遇到特殊情况，您可以给出特殊情况下的负值。也没有讨价还价的定位。工程很好，非常可读。例如：http://codepen.io/anon/pen/DpHvu