我有一个< div>与填充。我设置它的高度：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;
}
据我所知，这应该使< div>消失。
但是，它仍然可见(在Chrome 31和我的Mac上的Firefox 25)。高度声明似乎不适用于填充，尽管框大小声明。
这是预期的行为吗？如果是，为什么？ The MDN page on box-sizing似乎没有提到这个问题。
根据我可以告诉，the spec – 它读到我的宽度和高度应该包括填充时Box-sizing：边框(或实际上填充框)设置。
解决方法
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.
As the content width and height cannot be negative ([CSS21],section 10.2),this computation is floored at 0.
然后如果height为0，则不能使padding在内部，因为这意味着高度将为负值。
