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.