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

8

32

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.

Prevail answered 2/6, 2011 at 10:31 Comment(2)
If i may ask: "without placing the > and < directly next to each other" - why is that a problem?Revenge
@DanMan: I think he simply means he wants a solution which does not involve changing the HTML.Chapatti
F
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/

Fredfreda answered 2/6, 2011 at 10:39 Comment(0)
C
27

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>
Chapatti answered 2/6, 2011 at 11:14 Comment(0)
C
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>
Crosscut answered 29/1, 2013 at 2:28 Comment(5)
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 <input> and <img> tags so the image wouldn't stack.Keciakeck
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!Abatement
A good one, but quite sad that it has to be this way.Kainite
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 :)Petasus
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.Everrs
F
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/

Fredfreda answered 2/6, 2011 at 10:39 Comment(0)
K
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.

Kamchatka answered 2/6, 2011 at 10:35 Comment(1)
@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 jsfiddle.net/sqASF/1 for an example.)Reggie
P
0

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

Polytypic answered 2/6, 2011 at 10:40 Comment(0)
K
0

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

Kainite answered 22/5, 2013 at 14:6 Comment(3)
Why the downvote? if every <a...> is enclosed in a <tr><td> 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.Kainite
The downvote was because you shouldn't use a table to fix a layout issue.Everrs
Interesting statement, upvoting it.Kainite
G
-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

Godolphin answered 2/6, 2011 at 10:42 Comment(0)
C
-3

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

Calondra answered 4/9, 2013 at 3:25 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.