Today, I stumbled upon something quite intriguing that has left me puzzled.
Consider the following HTML:
<div class="a"><div class="b"></div></div>
And CSS:
.a {
background: blue;
}
.b {
display:inline-block;
height: 30px;
width: 30px;
background: red;
}
One would anticipate the outer "a" div to be exactly as tall as required to contain "b", which is 30px. However, when rendered, "a" measures 35px in height. There seems to be a gap of 5 pixels below "b". What could be causing this discrepancy?
View the example here: http://jsfiddle.net/Pb2q9/. I've tested this on both Chrome and Firefox, and they produce the same result.
Interestingly, changing "b" to display:block eliminates the extra space at the bottom. Can someone shed light on why these two scenarios yield different outcomes? Why does inline-block result in 5px of additional space?
EDIT:
Even more surprisingly, altering the HTML to
<div class="a"><div class="b">x</div></div>
Where only the single character "x" is placed in the b div, removes the extra 5px at the bottom!