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

问题

This question already has an answer here:

How do I remove the space between inline-block elements? 39 answers

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.

回答1:

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/

回答2:

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>

回答3:

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>

回答4:

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.

回答5:

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

回答6:

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

回答7:

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

回答8:

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

来源：https://stackoverflow.com/questions/6213354/how-can-i-eliminate-spacing-between-inline-elements-in-css

标签

html

css

whitespace

removing-whitespace