为什么要使用负边距? [英] why use negative margins?

问题描述

只是在这里查看一些CSS，我注意到:

Just looking at some CSS here, and I noticed:

.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像素的边距?

Why would you put -30 and -25px margins?

推荐答案

我开始输入答案，然后找到一个更好的答案

I started typing an answer, and then found a much better one here (Wayback Machine backup). Some salient points:

负边距:

• 是有效的CSS
• 不要中断页面流
• 具有高度的跨浏览器兼容性(尽管如果它们破坏了链接或浮动图像，请尝试添加位置:相对；这样就可以解决此问题)

它们对未浮动元素的影响:

• 将它们应用到元素的顶部或左侧，以适当的方向拉"该元素
• 但是，将它们应用于元素的底部或右边会立即将随后的元素拉入它们，使其重叠

它们对浮动元素的影响:

• 这更加复杂，我无法比文章更好地对其进行总结.在Firebug中玩耍以感受一下它们.

该文章中有一些出色的示例，其中使用了负保证金(尤其是3列布局！魔术.我使用了之前用于页面布局的类似技术.)我发现它们的最常见用法是仅移动一个元素以校正其位置，并使一个元素与另一个元素重叠视觉效果.

There are some brilliant examples of negative margin use in that article (especially the 3-column layout! Magic. I've used a similar technique for page layout before.) The most common use for them I've found is just to move an element a small amount to correct its position, and to make one element overlap another for visual effect.

这篇关于为什么要使用负边距?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！