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中）。尽管有height声明，但box-sizing声明似乎并未应用于填充。

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

据我所知，the spec也没有 - 它向我显示宽度和高度都应该包括box-sizing: border-box（或确实padding-box）设置时的填充。< / p>

Answer 1

border-box的确切定义是：

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

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

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

如果height为0，则无法将填充放在内部，因为这意味着高度为负。

Answer 2

适用height: 0;的声明。如果你把它留在height: auto;，你会看到20px的差异（线条的高度为“你好！”），使它总高100px。高度设置为零时，它只有80px高：padding-top + padding-bottom = 80px

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

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

更新：正如哈代提到的那样，使用额外的包装器可以解决这个问题。

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 dashed;
}
.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;
}

为什么不高度：0隐藏我的填充<div>，即使使用box-sizing：border-box？</div>

HTML

CSS

2 个答案: