[duplicate] A Space Between Inline-Block List Items

Problem

Why is there a space in the inline-block list items? I always get spaces no matter how I make my list items into a menu.

Asked by Tyler Crompton

Solution #1

I’ve seen this previously and responded to it:

After doing some more investigation, I realized that inline-block is a whitespace-dependent method that is also font-dependent. 4px is rendered in this scenario.

To avoid this, combine all of your lis into a single line, or block the end and begin tags together as follows:

Example here.

The recommended approach for solving this, as indicated in other answers and comments, is to add font-size: 0; to the parent element:

ul {
    font-size: 0;
}

ul li {
    font-size: 14px;
    display: inline-block;
}

This improves HTML readability (avoiding running the tags together etc). The spacing effect is because of the font’s spacing setting, so you must reset it for the inlined elements and set it again for the content within.

Answered by Kyle

Solution #2

Solution:

ul {
    font-size: 0;
}

ul li {
    font-size: 14px;
    display: inline-block;
}

The parent font size must be set to 0.

Answered by David Horák

Solution #3

I’d use the float left CSS attribute, as shown below. That eliminates the extra space.

ul li {
    float:left;
}

Answered by Trevor G

Solution #4

This is true not just for display:inline-block, but for display:inline as well. As a result, this works in addition to David Horák’s solution:

ul {
    font-size: 0;
}
ul li {
    font-size: 14px;
    display: inline;
}

Answered by Gerbus

Solution #5

Another option, similar to Gerbus’, except it works with relative font scaling as well.

ul {
    letter-spacing: -1em; /* Effectively collapses white-space */
}
ul li {
    display: inline;
    letter-spacing: normal; /* Reset letter-spacing to normal value */
}

Answered by Leo Pitt

Post is based on https://stackoverflow.com/questions/5256533/a-space-between-inline-block-list-items