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

This question already has answers here: How to remove the space between inline/inline-block elements? (41 answers) Closed 8 years ago. 开发者_JAVA百科

I have a div with a bunch of image tags inside, here is an example:

<div style="margin: 0; padding: 0; border: 0;">
    <a href="/view/foo1"><img src="foo1.jpg" alt="Foo1" /></a>
    <a href="/view/foo2"><img src="foo2.jpg" alt="Foo2" /></a>
    <a href="/view/foo3"><img src="foo3.jpg" alt="Foo3" /></a>
</div>

Because there is whitespace between the tags, browsers will display some whitespace between the images (Chrome decides on 4px). How can I tell the browser to show NO whitespace whatsoever between the images, without placing the > and < directly next to each other? I know letter-spacing applies in addition to what the browser decides to use, so that's useless even with a negative value. Basically I'm going for something like Twitter has at the bottom of their home page. I looked at their code and they're using an unordered list. I could just do that but I'd like the technical explanation for why there appears to be no way to eliminate the white space from between these images.

---

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="/view/foo1"><img src="http://dummyimage.com/64x64/444/fff" alt="Foo1" /></a>
    <a href="/view/foo2"><img src="http://dummyimage.com/64x68/888/fff" alt="Foo2" /></a>
    <a href="/view/foo3"><img src="http://dummyimage.com/64x72/bbb/fff" alt="Foo3" /></a>
</div>

---

Simplest solution that doesn't muck with layout and preserves code formatting:

<div style="margin: 0; padding: 0; border: 0;">
       <a href="/view/foo1"><img src="foo1.jpg" alt="Foo1" /></a><!--
    --><a href="/view/foo2"><img src="foo2.jpg" alt="Foo2" /></a><!--
    --><a href="/view/foo3"><img src="foo3.jpg" alt="Foo3" /></a>
</div>

---

try to add img {margin:0;padding:0;float:left}

in other words remove any default margin and padding of browsers for img and float them.

Demo: http://jsfiddle.net/PZPbJ/

---

The spacing causes the images to move as they are inline elements. If you want them to stack up, you could use the unordered list (as twitter does) as this will put each image inside a block element.

Inline elements are displayed inline with text.

---

You can also make all anchors to float-left and set margin-left to -1

---

It looks like using a table is the correct way to go about this, as whitespaces have no effect between cells.

---

If you are serving your pages with Apache then you can use the Google PageSpeed Module. This has options that you can use to collapse whitespace:

http://code.google.com/speed/page-speed/docs/filter-whitespace-collapse.html

You do not have to use the more 'dangerous' options of PageSpeed.

Also see the answers in this question for how to remove whitespace in CSS:

Ignore whitespace in HTML

---

Add style="display:block" to your img tags.