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/

This link might be helpful: http://stackoverflow.com/questions/1833734/display-inline-block-extra-margin — , Sep 25 '13 at 11:18

score 14 · Accepted Answer · answered Sep 25 '13 at 11:17

14

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

answered Sep 25 '13 at 11:17

insertusernamehere

23,204
9
87
126

Itay · Answer 2 · 2013-09-25T11:24:35.837

4

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.

edited Sep 25 '13 at 11:24

answered Sep 25 '13 at 11:17

Itay

16,601
2
51
72

score 4 · Answer 3 · answered Sep 25 '13 at 11:34

4

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/

answered Sep 25 '13 at 11:34

Marc Audet

46,011
11
63
83

Thank you for this suggestion, if the child elements contain text, then setting `font-height` or `line-height` to 0 is no viable approach. This helped me. – Sascha Wolf Jul 15 '14 at 10:36

score 1 · Answer 4 · answered Sep 25 '13 at 11:23

Inline-block elements are placed as block on the base line of a text line, as they are inline elements, so it's the space from the base line to the bottom of the text line that takes up space.

You can use floating elements instead of inline elements:

#container {
    background-color: Green;
    width: 500px;
    overflow: hidden;
}

.thing {
    float: left;
    background-color: Red;
    height: 20px;
    width: 18%;
    margin-left: 1.25%;
    margin-right: 1.25%;
}

#first {margin-left: 0px;}
#last {margin-right: 0px;}

Demo: http://jsfiddle.net/VHkNx/2/

score 0 · Answer 5 · answered Sep 25 '13 at 11:22

0

Easiest way is not to give them display: inline-block, but use float: left; . All elements will float next to each other. Good luck!

answered Sep 25 '13 at 11:22

Cowwando

450
5
11

Try this solution on the fiddle and see what happens. – Itay Sep 25 '13 at 11:23
the "float" attribute messes up with most of the elements so its a good practice to make a new class i.e. "clear{clear: both}", wtich clears the float attribute for the elements after the floated elements. In your case, after the floated blocks add one empty div element with the class i mentioned from above or just this
and everything will be just fine! I tried it, and it works. – Cowwando Sep 25 '13 at 11:35
No need for this. See Guffa's answer – Itay Sep 25 '13 at 11:39

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

5 Answers5