Remove space between images

Question

I have four images as seen in this fiddle:

<img src='http://black-agency.com/dat/Images/BG/dark.jpg'/>
<img src='http://black-agency.com/dat/Images/BG/dark.jpg'/>
<br>    
<img src='http://black-agency.com/dat/Images/BG/dark.jpg'/>
<img src='http://black-agency.com/dat/Images/BG/dark.jpg'/>

I have removed padding and margin, and yet space remains between the pictures.

How can I have the pictures be immediately adjacent, without space?

score 6 · Accepted Answer · answered Feb 24 '13 at 16:19

6

You can remove the spaces with Del:

<img src='http://black-agency.com/dat/Images/BG/dark.jpg'/><img src='http://black-agency.com/dat/Images/BG/dark.jpg'/><br><img src='http://black-agency.com/dat/Images/BG/dark.jpg'/><img src='http://black-agency.com/dat/Images/BG/dark.jpg'/>

Browsers interpret newlines as space, so you should remove them if you don't want to have one space there.

answered Feb 24 '13 at 16:19

Martin Thoma

124,992
159
614
958

There are no newlines between images in the delivered source. – Igor Jerosimić Feb 24 '13 at 16:34
+1 @IgorJerosimić i can not imagine that it can be that silly – NullPoiиteя Feb 24 '13 at 16:40

score 0 · Answer 2 · answered Feb 24 '13 at 17:09

You can mess around with floating instead of relying on inline-block default styling, though in this case it would probably be quite complicated.

You could set the font size of the parent to nothing. See this fiddle.

You could set negative margins. See this fiddle.

Or finally, you could remove the whitespace between the img tags in the markup, however, this can make the markup look messy.

Its really up to you to decide which is the best method in your particular situation. Note that background images are more suited to the CSS background-image property and background shorthand property if those images were not just placeholders.

Remove space between images

2 Answers2