CSS - 负边距删除父级的填充答案

【问题标题】：CSS - Negative Margin To Remove Parent's PaddingCSS - 负边距删除父级的填充
【发布时间】：2011-05-14 13:46:34
【问题描述】：

使用负边距来移除包装元素的内边距是一种好习惯吗？

例如，以下哪个代码段更好用？

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

【问题讨论】：

标签： css padding margin margins

【解决方案1】：

负边距隐藏 div…。这是诀窍使用缩放：1，位置：相对

这里是例子

问题：

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

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

解决方案：

这样你的 css 类就会变成

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

【讨论】：

【解决方案2】：

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

【讨论】：

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

【解决方案3】：

为什么不直接声明padding:5px 0; 这样就没有水平填充？虽然我认为使用负边距完全没问题，但这就是它们的目的，但如果你能从一开始就避免它们，那就这样做吧。

【讨论】：

但在示例中，我需要水平填充来实现所谓的“缩短宽度字符串”。
为什么不把它包裹在另一个元素中并给它填充？
顺便说一句，我仍然认为负边距非常适合。

【解决方案4】：

好吧，它几乎是一个黑客。只要有节制地使用，我会说没关系。关键是确保它易于阅读和理解。如果需要，请添加 cmets。

【讨论】：