Why does inline-block cause this div to have height?

Question

jsFiddle Demo

I cannot seem to figure out why using display:inline-block would cause this

element to

Answer 1

As cited above by @nkmol, its does carry default font size and line height causing unnecessary height for the parent. In some cases, line-height: 0 does solve the problem. But sometimes, in exceptional cases like an empty tag inside a parent

I above case, just setting the font-size: 0 or line-height: 0 doesn't solve the problem as the a tag.

vertical-align: middle;

fixes the problem in such a case.