How can I eliminate spacing between inline elements in CSS?

Question

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 i may ask: "without placing the > and < directly next to each other" - why is that a problem? — DanMan, Jun 02 '11 at 11:19
@DanMan: I think he simply means he wants a solution which does not involve changing the HTML. — thirtydot, Jun 02 '11 at 11:23

score 27 · Answer 1 · edited May 23 '17 at 11:45

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>

score 25 · Answer 2 · answered Jan 29 '13 at 02:28

25

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>

answered Jan 29 '13 at 02:28

ThinkingStiff

64,767
30
146
239

This seems to be the best solution. Not intrusive and not necessary to play with styles or anything really. I had a similar issue where I added comments between and tags so the image wouldn't stack. – Ross Apr 17 '13 at 02:30
3

Yes, yes, and a thousand more yeses. This should be the highest rated answer on this post imho (not that the other answers are bad, of course, and for the record, the OP did state "using CSS alone"), however, for those of us who don't care how we do it as long as it gets done (and as long as it preserves the readability of our html, after all, that's why most of us don't want to collapse them all on one mile-long line in the first place), this solution is the easiest, least intrusive, and preserves readability to perfection. NICE ANSWER, just what I was looking for! – VoidKing Apr 24 '13 at 16:41
1

A good one, but quite sad that it has to be this way. – Daniel F May 21 '13 at 09:55
I like the comment line continuations, though one could use normal continuations to the same effect, at the sacrifice of readability however. This preserves more readability IMO, I'll have to try this out :) – Derek Litz Jun 26 '13 at 22:05
We used this solution, a few weeks later the gap was back and we found that accidental code formatting had broken it. So be careful when using this. – user247702 Nov 18 '13 at 13:26

score 14 · Accepted Answer · answered Jun 02 '11 at 10:39

14

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/

answered Jun 02 '11 at 10:39

Sotiris

38,986
11
53
85

score 1 · Answer 4 · answered Jun 02 '11 at 10:35

1

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.

answered Jun 02 '11 at 10:35

Adam Hutchinson

264
3
12

@Jake You could also float them, if you can make that work with the rest of your layout. A `float: left` on the images will eliminate the spacing and clump them together; you'll just need to clear anything you want to appear below them, too. (See http://jsfiddle.net/sqASF/1/ for an example.) – Matt Gibson Jun 02 '11 at 10:39

score 0 · Answer 5 · answered May 22 '13 at 14:06

0

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

answered May 22 '13 at 14:06

Daniel F

13,684
11
87
116

Why the downvote? if every is enclosed in a and the div replaced by a table, there won't be any whitespace between the divs, as long as cellspacing and cellpadding is set to 0. – Daniel F Sep 16 '13 at 14:16
4

The downvote was because you shouldn't use a table to fix a layout issue. – user247702 Nov 18 '13 at 13:31
Interesting statement, upvoting it. – Daniel F Nov 18 '13 at 18:50

score 0 · Answer 6 · answered Jun 02 '11 at 10:40

0

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

answered Jun 02 '11 at 10:40

Cata

11,133
11
65
86

score -1 · Answer 7 · edited May 23 '17 at 11:53

-1

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

edited May 23 '17 at 11:53

Community

1
1

answered Jun 02 '11 at 10:42

ʍǝɥʇɐɯ

4,012
7
32
53

score -3 · Answer 8 · edited Sep 04 '13 at 03:47

-3

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

edited Sep 04 '13 at 03:47

Blorgbeard

101,031
48
228
272

answered Sep 04 '13 at 03:25

G. Arico

1

How can I eliminate spacing between inline elements in CSS?

8 Answers8

Linked