CSS - 使用负边距消除父元素的内边距

Question

使用负边距来移除包装元素的填充是否是一种好的实践方法？

例如，下面哪个代码片段更好？

<div style="padding: 5px;">
 Shortened width string
 <div style="margin: 0 -5px;">Full width string</div>
 Shortened width string
</div>

或者

<div>
 <div style="padding: 5px;">Shortened width string</div>
 <div>Full width string</div>
 <div style="padding: 5px;">Shortened width string</div>
</div>

- Denis Bobrovnikov

Answer 1

为什么不直接声明padding:5px 0;，这样就没有水平内边距了？虽然我认为使用负边距是完全可以的，因为它们就是为此而设计的，但如果您可以在一开始避免使用它们，那就这样做吧。

- meder omuraliev

---

但是在这个例子中，我需要所谓的“缩短宽度字符串”的水平填充。 - Denis Bobrovnikov

为什么不将其包装在另一个元素中并给它填充？ - meder omuraliev

顺便说一句，我仍然认为负边距非常适合这种情况。 - meder omuraliev

Answer 2

嗯，这有点像是一种hack。只要适度使用，我认为还可以接受。关键是要确保它易于阅读和理解。如果需要，可以添加注释。

- Nathan MacInnes

Answer 3

第二种方法要好得多。应避免使用负边距，因为它们会在IE中引起问题。

- mmurch

---

添加position:relative;有助于IE正确显示负边距。之后，您只需要解决由position:relative;本身引起的问题:D。（触发hasLayout有所帮助） - AMilassin

Answer 4

负边距会隐藏div… 这里有一个技巧，使用zoom:1, position: relative

这是一个例子

问题：

.container{
padding: 20px;
}
.toolbar{
margin-top: -10px ;
}

在IE中，工具栏的红色区域会隐藏自己。即使我们使用了zoom: 1。为了解决这个问题，我们需要添加position: relative。

解决方案：

因此，您的CSS类将变成

.container{
padding: 20px;
}
.toolbar{
margin-top: -10px ;
zoom: 1;
position: relative;
}

- Abdul Wahid