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

Question

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

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.

Answer 1

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