为什么要使用负边际？

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

我开始输入一个答案,然后在这里找到了一个更好的答案(Wayback Machine备份).一些重点:

负边际:

• 是有效的CSS
• 不要破坏页面流
• 具有高水平的跨浏览器兼容性(尽管如果它们破坏了你的链接或浮动图像,那么尝试添加position:relative;那应该修复它)

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

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

它们对浮动元素的影响:

• 这更复杂,我不能比文章更好地总结它.在Firebug玩一玩,感受它们.

在那篇文章中有一些使用负边距的精彩例子(特别是3列布局!魔术.我之前使用了类似的技术进行页面布局.)我发现它们最常见的用途就是移动元素少量来纠正它的位置,并使一个元素与另一个元素重叠以获得视觉效果.