CSS - 负边距删除父母的填充

使用负边距来移除包装元素的填充是否是一种很好的做法？CSS - 负边距删除父母的填充

例如，下列哪些代码段最适合使用？

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

来源

2010-11-23 Denis Bobrovnikov

那么它的近乎是一个黑客。只要它用于克制，我会说没关系。关键是要确保它易于阅读和理解。如果需要，请添加注释。

来源

2010-11-23 16:13:40

为什么不只是声明padding:5px 0;所以你没有水平填充？虽然我会争辩说使用负边距是完全正确的，但这是他们所做的，但如果你能避免它们，那就这样做吧。

来源

2010-11-23 16:14:06

但在这个例子中，我需要为所谓的“缩短宽度字符串”水平填充。 – 2010-11-23 16:25:06

为什么不把它包装在另一个元素中并给它填充？ – 2010-11-23 16:25:50

第二是远远优越。应该避免负边距，因为它们会在IE中导致问题。

来源

2010-11-23 16:17:23 mmurch

负边距其隐藏分区...。下面是特技使用变焦：1，位置：相对

下面是实施例

问题：

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

在工具栏的div隐藏本身的IE红色区域

。即使我们正在使用缩放：1.要摆脱这个问题，我们需要添加位置：相对也是。

解决方案：

所以你的CSS类将成为

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

来源

2011-11-22 14:28:50

CSS - 负边距删除父母的填充

回答

相关问题