css - 为什么高度 : 0 hide my padded , 即使 box-sizing : border-box?

Question

我有一个 <div>与填充。我已将其设置为 height: 0 , 并给它 overflow: hidden和 box-sizing: border-box .

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

<div>Hello!</div>

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

但是，它仍然可见(在我的 Mac 上的 Chrome 31 和 Firefox 25 中)。 height尽管 box-sizing 声明似乎不适用于填充声明。

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

据我所知，the spec 也没有。 — 对我来说，当 box-sizing: border-box 时，宽度和高度都应该包含填充。 (或者实际上 padding-box )已设置。

Answer 1

border-box 的确切定义是:

That is, any padding or border specified on the element is laid out and drawn inside this specified width and height. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified ‘width’ and ‘height’ properties.

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

As the content width and height cannot be negative ([CSS21], section 10.2), this computation is floored at 0.

然后，如果 height 为 0，则不能使内边距位于内部，因为这意味着高度将为负数。