How to Eliminate Unwanted Inline‑Block Gaps in CSS: 9 Proven Techniques

1 Phenomenon Description

When true inline‑block elements are displayed horizontally, line breaks or spaces between them produce visible gaps. A simple example shows the problem:

<input /> <input type="submit" />

Even after converting non‑inline‑block elements to inline‑block, the gap remains.

.space a {
    display: inline-block;
    padding: .5em 1em;
    background-color: #cad5eb;
}
<div class="space">
    <a href="##">惆怠</a>
    <a href="##">淡定</a>
    <a href="##">热血</a>
</div>

2 Remove Whitespace

The gap originates from spaces between HTML tags. Removing those spaces eliminates the gap, but for readability we can collapse tags in several ways:

<div class="space">
    <a href="##">
    惆怠</a><a href="##">
    淡定</a><a href="##">
    热血</a>
</div>

<div class="space">
    <a href="##">惆怠</a><!--
    --><a href="##">淡定</a><!--
    --><a href="##">热血</a>
</div>

3 Use Negative Margin

.space a {
    display: inline-block;
    margin-right: -3px;
}

The exact negative value depends on the font and size; for a 12 px context, Arial needs –3 px, Tahoma/Verdana –4 px, Geneva –6 px. This method can be fragile for large‑scale layouts.

4 Let Closing Tags “Eat” the Gap

By omitting the closing

</a>

on all but the last link, the whitespace disappears. For IE6/7 compatibility the final closing tag must remain. In HTML5 you can simply write:

<div class="space">
    <a href="##">惆怠
    <a href="##">淡定
    <a href="##">热血
</div>

5 Use font-size:0

.space {
    font-size: 0;
}
.space a {
    font-size: 12px;
}

Adding

-webkit-text-size-adjust:none;

used to be required for Chrome, but recent Chrome versions have removed the minimum‑font restriction, making the extra rule unnecessary.

6 Use letter-spacing

.space {
    letter-spacing: -3px;
}
.space a {
    letter-spacing: 0;
}

This works in most browsers, though Opera may retain a 1 px minimum gap unless the negative value is large enough.

7 Use word-spacing

.space {
    word-spacing: -6px;
}
.space a {
    word-spacing: 0;
}

Negative word‑spacing behaves similarly to letter‑spacing; large negative values generally avoid overlap.

8 Other Ready‑Made Methods

YUI 3 CSS Grids use combined letter‑spacing and word‑spacing hacks for block‑level elements:

.yui3-g {
    letter-spacing: -0.31em; /* webkit */
    *letter-spacing: normal; /* IE < 8 */
    word-spacing: -0.43em; /* IE < 8 & gecko */
}
.yui3-u {
    display: inline-block;
    zoom: 1; *display: inline; /* IE < 8 */
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
}

Another approach by RayM combines inline‑block with table display:

li {
    display:inline-block;
    background: orange;
    padding:10px;
    word-spacing:0;
}
ul {
    width:100%;
    display:table; /* tweak webkit */
    word-spacing:-1em;
}
.nav li { *display:inline;}

9 Conclusion

There are many more ways to remove inline‑block gaps; feel free to share additional techniques in the comments. Some methods above may have incomplete testing, so corrections are welcome.