Fixing Whitespace Between Inline Elements

11-03-2020

I was messing around with inline elements the other day and stumbled upon a minor annoyance. You see, a series of inline-block elements with no formatting applied, will have spaces in between them.

HTML

<section>
    <div>One</div>
    <div>Two</div>
    <div>Three</div>
    <div>Four</div>
</section>

CSS

section div {
    padding: 10px;
    background: #ca3e47;
    display: inline-block;
}

This will result in the following:

Notice the spaces? Normally you'd want the elements to stay flush against each other to avoid awkward, unclickable gaps.

Luckily there are a few ways to get around this.

Remove the spaces

<section>
    <div>
    One</div><div>
    Two</div><div>
    Three</div><div>
    Four</div>
</section>

or

<section>
    <div>One</div
    ><div>Two</div
    ><div>Three</div
    ><div>Four</div>
</section>

or by inserting comments

<section>
    <div>One</div><!--
    --><div>Two</div><!--
    --><div>Three</div><!--
    --><div>Four</div>
</section>

All of the above will result in the following:

While none of these solutions are elegant, they get the job done.

Negative margin

Another solution is to add negative margin the elements, thus compensating for the space.

section div {
    display: inline-block;
    margin-right: -7px;
}

The above will result in the following:

Omit the closing tag

With HTML5 we no longer have to add closing tags. While this method will remove the unwanted space, it may introduce other awkward problems.

<section>
    <div>One
    <div>Two
    <div>Three
    <div>Four
</section>

The above will result in the following:

Set the fontsize

section {
    font-size: 0;
}
div {
    font-size: 16px;
}

The above will result in the following: