将 CSS 内边距设置为负数答案

【问题标题】：Setting CSS padding in negative将 CSS 内边距设置为负数
【发布时间】：2012-12-27 05:27:26
【问题描述】：

考虑以下 HTML。我有一个.wrap div，它的左右填充为 50px。在那个 div 里面我有另一个 div .full。我想通过克服.wrap 的填充来增加它的默认宽度。

我将它的内边距设置为 -50px，这样它的宽度就等于 .wrap 的宽度，但它不起作用。

HTML：

<div class="wrap">
    <div class="inner">
        <div class="normal">xx</div>
        <div class="full">should be same width (300px) as wrap</div>
    </div>
</div>

CSS：

.wrap{
    height: 500px;
    width: 300px;
    margin: 0 auto;
    padding: 0 50px;
    background: yellow;
}

.full{
    background: orange;
    padding: 0 -50px;
}

演示： http://jsfiddle.net/WDS6X/

【问题讨论】：

CSS 中不允许使用负填充。

标签： html css

【解决方案1】：

在这种情况下，您需要使用边距，填充用于内部空间。使用

margin: 0 -50px;

这里是 cmets 中 nienn 提供的 JSFiddle，而不是 .full-div 中的填充。

为了进一步理解，请查看this SO thread，其中包含一个非常好的解释。

【讨论】：