avoid spaces between img

Question

How to avoid the spaces between img tags?

The content in the print screen is marked

enter image description here

code:

#menu > img {
    margin:0px;
    padding:0px;
}

<div id="menu">
    <img src="/gfx/menu.home.png" />
    <img src="/gfx/menu.functions.png" />
    <img src="/gfx/menu.prices.png" />
</div>

remove the whitespaces, as noted in several answers, or float the images. — remy, Feb 11 '12 at 22:54
See here: [How to remove the space between inline-block elements?](http://stackoverflow.com/questions/5078239/how-to-remove-the-space-between-inline-block-elements) — Šime Vidas, Feb 11 '12 at 22:55
If you read more at SO, you'll find 18 other workarounds. Let's have the 19th: use a single image + image map. — Ray Cheng, Feb 11 '12 at 23:41

score 4 · Answer 1 · answered Feb 11 '12 at 22:50

4

Remove spaces between the img tags in your code.

<div id="menu">
    <img src="/gfx/menu.home.png" /><img src="/gfx/menu.functions.png" /><img src="/gfx/menu.prices.png" />
</div>

answered Feb 11 '12 at 22:50

Marek Sapota

20,103
3
34
47

Such an awful workaround. HTML should ignore whitespace, I don't understand why this isn't always the case. – bricker Feb 11 '12 at 23:17
3

@bricker When parsing the HTML source code, if the browser encounters a sequence of white-space characters, it will condense that sequence into a single space. However, if there is at least one single white-space character between two `` tags, the browser will create a Text node between those two image element nodes in the DOM. – Šime Vidas Feb 11 '12 at 23:23
White-spaces ARE ignored but not the last one. If you have multiple white-spaces together, all of them are ignore but the last one (by default). In my opinion, CRLF should be ignore by default also. – Ray Cheng Feb 11 '12 at 23:25
Someone else suggested setting `font-size` to `0`, basically removing the created text node. I think it's ugly too, but in most situations inserting the space is actually the wanted behaviour - like two `a` tags next to each other, etc. – Marek Sapota Feb 11 '12 at 23:32

score 1 · Accepted Answer · edited May 23 '17 at 12:07

1

You could float them:

#menu {
    overflow: auto;
}

#menu > img {
    float: left;
}

Live demo: http://jsfiddle.net/bzWYX/

Btw I have asked a similar question here.

edited May 23 '17 at 12:07

Community

1
1

answered Feb 11 '12 at 22:58

Šime Vidas

182,163
62
281
385

@clarkk Floating should work. Images that are siblings and floated to the same side should be pressed together (unless they have margins or borders). I would love to see a demo of your issue. – Šime Vidas Feb 11 '12 at 23:14

score 0 · Answer 3 · answered Feb 11 '12 at 22:51

0

<div>
    <img src="/gfx/menu.home.png" /><img src="/gfx/menu.functions.png" /><img src="/gfx/menu.prices.png" />
</div>

Put the img tags on one line will do the trick.

answered Feb 11 '12 at 22:51

Ray Cheng

12,230
14
74
137

avoid spaces between img

3 Answers3