为什么不高度: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中).该height声明没有出现,将适用于填充,尽管box-sizing声明.

这是预期的行为吗？如果是这样,为什么？MDN页面box-sizing似乎没有提到这个问题.

据我所知,规范也没有- 它向我读取宽度和高度都应该包括填充时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的差异(线条的高度与"你好!"),使它总高100px.高度设置为零,它只有80px高:padding-top + padding-bottom = 80px

所以答案是:是的,这是预期的行为.

您可以设置宽度和高度之间的任意值0及80px(如果你有填充40像素),仍然得到相同的尺寸.

更新:正如哈代提到的,使用额外的包装器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;
}