How to Remove the Gap Between Inline-Block Elements?

One caveat of setting an element's display property to inline-block is that it treats the white spaces (i.e. single space, tabs and line-breaks) between elements the same way white spaces are treated between words of text. This happens because an inline-block element is supposed to appear like an inline-level element (i.e. appear on the same baseline) whilst maintaining a block-level elements' capabilities such as being able to set the width, height, and top / bottom margins and paddings. This is why we see unwanted gaps appearing between inline-block elements.

It is important to know that this is actually not a bug, but how an inline-block element behaves by default.

There are ways to overcome this issue; to demonstrate these, let's consider the following CSS style rule for all examples:

li {display: inline-block; border: 1px solid red;}

Removing Spaces Between Elements

Quite simply if we remove the white space between elements that are inline-block we'll get rid of the extra space. This can be done as follows:

By Having All Elements on One Line:

<ul>
    <li>Item 1</li><li>Item 2</li><li>Item 3</li>
</ul>

Pros:

• Simple and straightforward; no extra markup or style rules required.

Cons:

• In some cases the HTML markup may appear hard to read.

By Removing the Space Between Opening and Closing Tags of Two Elements:

<ul>
    <li>Item 1</li><li>
    Item 2</li><li>
    Item 3</li>
</ul>

Pros:

• Simple and straightforward; no extra markup or style rules required.

Cons:

• It may make the markup look messy or confusing.
• It may become easy to miss the ending / starting tag of an element.

By Adding HTML Comments as Fillers Between Elements:

<ul>
    <li>Item 1</li><!--
    --><li>Item 2</li><!--
    --><li>Item 3</li>
</ul>

Pros:

• Helps keep the visual formatting of the document as we intend (making it easy to follow).

Cons:

• Extra markup is required.
• Adding comments to a big list of elements could be a cumbersome job.

Reset Parent Element's Font Size

ul {font-size: 0;}
li {
    display: inline-block; 
    font-size: 14px; /* reset to default (fallback for old browsers) */
    font-size: 1rem; /* for modern browsers use "root em" font size */
    border: 1px solid red;
}

The rem unit (root em) provides a way to specify font sizes as fractions of the root element's font size (i.e. the font size of the html element). This would help us reset the font size of the inner element the same as the font size of the root element. Please note the browser support for rem unit before using it. As a fallback you can specify the font size in px as well.

Pros:

• CSS-only solution, no changes to the markup required.

Cons:

• It may not work across all browsers / devices as there have been some reports of problems on Pre-Jellybean Android devices and Safari 5.0.x.
• Browser support for rem unit may be limited, which means resetting the value manually (such as by using the px unit).
• In cases where using rem unit is not an option, using em unit to cascade the font sizes to child elements could be an issue.