为什么没有高度：0隐藏我的填充<div>，即使有框大小：边框？
我有一个填充的<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）。 尽pipebox-sizing声明， height声明似乎不适用于填充。
这是预期的行为？ 如果是这样，为什么？ box-sizing的MDN页面似乎没有提到这个问题。
也就是说，据我所知， 这个规格 – 在我看来，宽度和高度都应该包括填充时的填充box-sizing: border-box （或确实是padding-box ）被设置。
border-box的确切定义是：
也就是说，在元素上指定的任何填充或边框都是在此指定的宽度和高度内绘制和绘制的。 内容宽度和高度是通过从指定的“宽度”和“高度”属性中减去相应边的边框和填充宽度来计算的。
所以你修改高度宽度属性，但padding和border永远不会改变。
由于内容宽度和高度不能为负数（[CSS21]，第10.2节），因此计算的结果为0。
那么如果height为0，则不能使填充在里面，因为这意味着高度将是负值。
height: 0;的声明height: 0; 被申请;被应用。 如果你把它放在height: auto; ，你会看到一个20px的差异（与“你好！”线的高度），使其总共100px高。 高度设置为零，只有80px高： padding-top + padding-bottom = 80px
所以答案是： 是的，这是预期的行为。
您可以将宽度和高度设置为0到80px之间的任何值（如果您有80px的填充），仍可以获得相同的尺寸。
更新：正如哈代提到的，使用额外的包装div解决这个问题。
演示
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; }
