Why doesn’t height:0 hide my padded <div>, even with box-sizing:border-box?

I’ve got a <div> with padding. I‘ve set it to height: 0, and given it overflow: hidden and 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/

As I understand, this should make the <div> disappear.

However, it’s still visible (in Chrome 31 and Firefox 25 on my Mac). The height declaration doesn’t appear to be applying to the padding, despite the box-sizing declaration.

Is this expected behaviour? If so, why? The MDN page on box-sizing doesn’t seem to mention this issue.

Nor, as far as I can tell, does the spec — it reads to me like both width and height should include padding when box-sizing: border-box (or indeed padding-box) are set.

Solution 1:

The exact definition of border-box is:

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.

So you can modify the height and width properties, but padding and border never change.

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

Then, if height is 0, you can't make the padding be inside, because that implies the height will be negative.

Solution 2:

The declaration of height: 0; is applied. If you leave it at height: auto;, you would see a 20px difference (the height of the line with "Hello!"), making it a total 100px high. With height set to zero, it's only 80px high: padding-top + padding-bottom = 80px

So the answer is: Yes, it's expected behavior.

You could set width and height to any value between 0 and 80px (if you have 40px of padding) and still get the same dimensions.

Update: As Hardy mentioned, using an additional wrapper div gets around this issue.

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