JaggyGauran

Freelance developer, and designer

Inline Block Right Margin Fix

I just found out that there's a varying margin to the right whenever you use display: inline-block;

div {
    background-color: rgb(250, 250, 171);
    color: rgb(0, 0, 0);
    display: inline-block;
    padding: 5px;
}
<div>First</div>
<div>Second</div>
<div>Third</div>
First
Second
Third

See the gap between? That's a right margin! AND IT FREAKIN' BROKE A LOT OF THINGS!

The Fix-es

Removing Whitespaces

After a little digging, I found out that inline-block has a white space issue. So, if you remove the spacing between the elements, it'll all go away.

<div>First</div><div>Second</div><div>Third</div>
First
Second
Third

Pro: This is an HTML fix so no hack is actually necessary.

Con: Your code may look butt ugly.

Reset Margins

This fix is resetting margins so that you won't depend much. As far as I can see, it's 30% of the parent's font-size so ems can fix it.

div {
    margin-right: -0.3em;
}

.inline-block {
    display: inline-block;
    margin-right: -0.3em;
}
<div class="inline-block">First</div>
<div class="inline-block">Second</div>
<div class="inline-block">Third</div>
First
Second
Third

Pros: CSS hack where it looks like it's solves everything. And you don't have to use exact pixels so, it kinda works.

Cons: On latest browsers, as of this writing, the margin issue is fixed so, it may fudge everything up and you'll have to rehack every single thing.

font-size: 0

This fix is what I use a lot. You remove the font size of the parent container so the margin goes bye-bye.

.container {
    font-size: 0;
}
<div class="container">
    <div>First</div>
    <div>Second</div>
    <div>Third</div>
</div>
First
Second
Third

Pro: It's a really neat fix and it won't affect anything when the bug is fixed.

Cons: Depends on a container with a font-size explicitly set so, you can't use ems on the children.