将CSS填充设置为负数

Question

考虑以下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/

Answer 1

在这种情况下，你需要使用margin，填充用于内部空间。 使用

margin: 0 -50px;

而不是.full-div中的填充，就像你想要的那样，这里是JSFiddle在评论中提供的nienn。

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