CSS负边距用于定位

Question

使用负边距进行定位是否可行？我在我的网站上有很多这样的应用，但感觉这不是一个稳定的定位方式。通常我也会建议使用它们。

例如，我有一个结账页面，上面有三个div叠放在一起。

<div class="A">
   header
</div>
<div class="B">
   content
</div>
<div class="C">
   footer
</div>

（A、B和C）是要叠放在一起的，看起来像是相互连接的。我使用以下方法实现了这一点：

.B
{
    margin-top: -20px;
}

B元素，与A元素底部对齐。

这样做好吗？还是应该使用top和left重新编码？

- Kyle

Answer 1

如果您的div之间有一些边距，可能是因为您没有重置边距和填充（请参阅：http://meyerweb.com/eric/tools/css/reset/）。

一般来说，使用负边距并不是什么坏事，但是如果您被迫几乎在所有地方设置它们，那么您应该重构您的CSS，因为结果在各种浏览器中可能会略有不同，这可能会导致很大的麻烦 :)。

- mamoo

---

是的，我确实有一个CSS重置，但是有一个很大的间隙，这是我能想到的唯一解决办法。自从使用它以来，我发现它确实有效，只是感觉不太稳定。谢谢你的回答 :) - Kyle

Answer 2

负边距已知会在IE7及以下版本中导致内容被截断的问题。正如alias所建议的那样，这也可能表明设计的其余部分存在问题。但我认为不能一概而论地说负边距在所有情况下都是“不良开发”。但无论何时，都要进行测试。

- Nitesh Goyal