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>

Answer 1

为什么不宣布padding:5px 0;所以你没有水平填充？虽然我认为使用负边距是完全没问题的，但这就是他们所做的，但如果你可以首先避免它们，那就这样做。

Answer 2

嗯，它接近于成为一个黑客。只要它用于克制，我会说它没关系。关键是要确保它易于阅读和理解。如果需要，请添加评论。

Answer 3

第二个是优越的。应避免使用负边距，因为它们会导致IE出现问题。

Answer 4

负边距隐藏div ...这是诀窍 使用zoom：1，position：relative

这是示例

<强>问题：

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

在工具栏div的IE红色区域隐藏自己。即使我们使用zoom：1。要摆脱这个问题我们需要添加位置：相对也是。

<强>解决方案：

所以你的css课程将成为

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