How can I eliminate spacing between inline elements in CSS? [duplicate]

Question

If you for some reason want to do it:

without using floats, and;
without collapsing the whitespace in your HTML (which is the easiest solution, and for what it’s worth, what Twitter is doing)

You can use the solution from here:

How to remove the space between inline-block elements?

I’ve refined it slightly since then.

See: http://jsfiddle.net/JVd7G/

letter-spacing: -1px is to fix Safari.

div {
    font-size: 0;
    letter-spacing: -1px
}

<div style="margin: 0; padding: 0; border: 0;">
    <a href="https://stackoverflow.com/view/foo1"><img src="http://dummyimage.com/64x64/444/fff" alt="Foo1" /></a>
    <a href="http://stackoverflow.com/view/foo2"><img src="http://dummyimage.com/64x68/888/fff" alt="Foo2" /></a>
    <a href="http://stackoverflow.com/view/foo3"><img src="http://dummyimage.com/64x72/bbb/fff" alt="Foo3" /></a>
</div>

Leave a Comment Cancel reply