Why does a container of inline-block divs become too high?

Question

I have a container div and 5 child div's with

{display: inline-block}

so they appear next to each other. Each of the child div's have a height of 20px, but the container grows to a height of 24px. Why does this happen?

Fiddle: http://jsfiddle.net/VHkNx/

Answer 1

Inline block elements still take care of the line-height/font-size. So adding this:

line-height: 0;

to #container will fix it.

Demo

Try before buy

Answer 2

Once you're using the inline-block display, your elements behaves similarly to words and letters. Whitespaces and line heights are rendered as well and it might cause some unexpected results.

One way of solving this is to give the container font-size: 0 setting (of course you can still give the child elements themselves their own font size).

jsFiddle Demo

---

• P.S - line-height: 0 will also work.

Answer 3

One simple way of fixing this is to add vertical-align: top to the child elements:

.thing {
    vertical-align: top;
    display: inline-block;
    background-color: Red;
    height: 20px;
    width: 18%;
    margin-left: 1.25%;
    margin-right: 1.25%;
}

This way, you don't need to adjust line heights or font sizes.

As noted earlier, a similar layout can be realized using floats. Both approaches are valid. See demo at: http://jsfiddle.net/audetwebdesign/74Y2V/