89

Given:

<img src="..."/>
<img src="..."/>

The result is two images with a single space between them. It seems that the normal behavior is to show any number of spaces, newlines, and tabs as a single white space. I know I can do the following:

<img src="..."/><img src="..."/>

OR

<img src="..."/><!--
--><img src="..."/>

OR

<img src="..."/
><img src="..."/>

Or any number of other hacks. Is there a way to remove that whitespace with CSS? e.g.

<div class="nospace">
    <img src="..."/>
    <img src="..."/>
</div>
steveo225
  • 11,394
  • 16
  • 62
  • 114

5 Answers5

129

Make them display: block in your CSS.

Daniel A. White
  • 187,200
  • 47
  • 362
  • 445
  • 39
    Better yet, `float: left` them as they need to be next to one another. Added benefit of making ``s `display: block` is that mysterious bottom margin disappears as well. – Matijs Oct 03 '11 at 23:16
  • 2
    With `float:left` works like a charm – steveo225 Oct 03 '11 at 23:19
  • 4
    For a bit more information about "Images, Tables, and Mysterious Gaps", see https://developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps – Andrew Jun 20 '12 at 12:58
  • If using `float: left`, also worth adding `clear: both` to a container element below your images to avoid funky overlapping layouts and the likes. – John Rix Aug 28 '15 at 00:31
  • Using floats is like opening a Pandora's box. A can full or worms. The best solution is what @daniel-a-white offered: display them as blocks – Omar Jun 14 '21 at 04:34
88

An easy way that is compatible pretty much everywhere is to set font-size: 0 on the container, provided you don't have any descendent text nodes you need to style (though it is trivial to override this where needed).

.nospace {
   font-size: 0;
}

jsFiddle.

You could also change from the default display: inline into block or inline-block. Be sure to use the workarounds required for <= IE7 (and possibly ancient Firefoxes) for inline-block to work.

alex
  • 479,566
  • 201
  • 878
  • 984
  • 1
    That is clever. My only concern would be if I needed text in the `div` too. I suppose that is what `span` is for. – steveo225 Oct 03 '11 at 23:21
  • @steveo225: Yeah, that is a potential problem. Making the elements block level is probably best if it suits your requirements. – alex Oct 03 '11 at 23:22
  • I ended up using this because I had a few `img` tags that were lined up and horizontally centred. `float:left;` aligned them all left; – igneosaur Jul 11 '16 at 23:36
  • Everybody else said set margin=0 and border=0 which didn't work. Setting font-size=0 FINALLY resolved my problem. Thank you!!! – Glider Guider Dec 06 '16 at 05:28
  • For my case I needed to set `line-height: 0;` instead of `font-size: 0;`. – jpoppe Mar 26 '17 at 11:04
  • The only answer works for me! – Arthur Jun 21 '18 at 15:12
14

The best solution I've found for this is to contain them in a parent div, and give that div a font-size of 0.

Dylan Richards
  • 796
  • 3
  • 9
  • 26
12

I prefer do like this 

img { float: left; }

to remove the space between images

boodle
  • 129
  • 1
  • 2
10

I found that the only option that worked for me was

font-size:0;

I was also using overflow and white-space: nowrap; float: left; seems to mess things up

Matt
  • 4,462
  • 5
  • 25
  • 35
Cole Robert
  • 101
  • 1
  • 2
  • Why does this get upvoted? Same answer has been given by alex 5 years earlier. – jpoppe Mar 26 '17 at 11:02
  • @jpoppe Stack Overflow prioritizes posts/answers that were more recently modified/edited. If you compare with alex's answer below, you'll noticed only this answer has been modified, but alex's has not. – tom_mai78101 Apr 25 '18 at 13:51