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

Viewed 36453

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.

2 Answers
Related