为什么 height:0 不隐藏我的填充 <div>，即使使用 box-sizing:border-box？

Question

我有一个带填充的<div>。我已将其设置为height: 0，并将其设置为overflow: hidden 和box-sizing: border-box。

HTML

<div>Hello!</div>

CSS

div {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 0;
    overflow: hidden;

    padding: 40px;

    background: red;
    color: white;
}

http://jsfiddle.net/FA29u/2/

据我了解，这应该会使 <div> 消失。

但是，它仍然可见（在我的 Mac 上的 Chrome 31 和 Firefox 25 中）。尽管box-sizing 声明，height 声明似乎并未应用于填充。

这是预期的行为吗？如果是这样，为什么？ The MDN page on box-sizing 似乎没有提到这个问题。

据我所知，the spec 也没有——在我看来，当设置了box-sizing: border-box（或者实际上是padding-box）时，宽度和高度都应该包括填充。

Answer 1

border-box的确切定义是：

也就是说，元素上指定的任何内边距或边框都会在指定的宽度和高度内进行布局和绘制。内容的宽度和高度是通过从指定的“宽度”和“高度”属性中减去相应边的边框和填充宽度来计算的。

因此您可以修改高度和宽度属性，但padding 和border 永远不会改变。

由于内容的宽度和高度不能为负数（[CSS21]，第 10.2 节），因此该计算以 0 为底。

那么，如果height 为0，则不能将内边距设为内部，因为这意味着高度将为负数。

Answer 2

应用height: 0; 的声明。如果您将其保留在height: auto;，您会看到 20px 的差异（带有“Hello！”的行的高度），使其总共高 100px。高度设置为零，它只有 80px 高：padding-top + padding-bottom = 80px

所以答案是：是的，这是预期的行为。

您可以将宽度和高度设置为介于 0 和 80px 之间的任何值（如果您有 40 像素的内边距）并且仍然获得相同的尺寸。

更新：正如 Hardy 提到的，使用额外的包装 div 可以解决这个问题。

Demo

HTML：

<div class="div-1">
    <div class="div-2">
        Hello!
    </div>
</div>

CSS：

.div-1 {
    padding: 40px;
    
    /* This is not visible! */
    border: 1px solid tomato;
}
.div-2 {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    height: 0px;
    width: 0px;
    background: red;
    color: white;
    overflow: hidden;
}