css - 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

负边距隐藏 div ...... 这是技巧使用缩放：1，位置：相对

这是示例

问题：

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

在工具栏 div 的 IE 红色区域中隐藏自身。即使我们正在使用缩放： 1. 为了摆脱这个问题，我们也需要添加位置：相对。

解决方案：

所以你的CSS类将成为

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

Answer 4

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