IMG default padding/margin

Question

I have a problem with the padding or margin of images. I use a lot of images on my site and they are fill a div element so that there are like 8 in a line and in the next line 8 again.

Now I always get a weird spacing between them and I cant figure out why. I tried using negative values but I don't think that is the right way. That's why I am asking here.

I tried using dispay:block but that brings the pictures all in 1 row, which I don't want. I want them to be side by side until they reach the max-width of the div.

my code looks like this:

img {
    width: 50px;
    height: 50px;
    /* display: block; */
    padding: 0;
    margin: 0;
}

Here a jsfiddle to express my problem: http://jsfiddle.net/cv5Xk/

No padding or margin in the fiddle you provided. What browser you have? Maybe it's local only to that browser. — Shadow The GPT Wizard, May 18 '14 at 11:15
Add `float: left;` to the `img` and in the end add `
` to handle a case of the images overflowing their container. — Gil, May 18 '14 at 11:16
yeah float: left did it, I use Google Chrome, but i tried the fiddle in firefox and internet explorer, all the same — gempir, May 18 '14 at 11:21

score 1 · Accepted Answer · answered May 18 '14 at 11:16

1

img {

    float: left;
    width: 50px;
    height: 50px;
    /* prob. you dont need this */
    padding: 0;
    margin: 0;
    border:0;
}

answered May 18 '14 at 11:16

eu.vl

192
1
7

1

thanks float:left did it. Im not sure why or how but thank you! – gempir May 18 '14 at 11:18

score 0 · Answer 2 · answered May 18 '14 at 11:18

The difference between these two lines

<img src='http://i.imgur.com/wipljF1.png' class='playerpreviewbig'><img src='http://i.imgur.com/wipljF1.png' class='playerpreviewbig'>

<img src='http://i.imgur.com/wipljF1.png' class='playerpreviewbig'> <img src='http://i.imgur.com/wipljF1.png' class='playerpreviewbig'>

is that the 2nd one has a space between the two images and depending on the font it that space will vary.

The solution is to butt the images next to each other on the same line in the html code.

Thankfully float: left fixes that problem. Because I have over 100 Pictures in my code putting them all in 1 line would be chaotic — gempir, May 18 '14 at 11:33

score 0 · Answer 3 · answered May 18 '14 at 11:19

0

Use float: left;

img {
    width: 50px;
    height: 50px;
    /* display: block; */
    padding: 0;
    margin: 0;
    float:left;
}

answered May 18 '14 at 11:19

Alex Char

32,879
9
49
70

score 0 · Answer 4 · answered May 18 '14 at 11:31

Remove spaces between img tags and use css vertical-align:top

HTML:

<img src='http://i.imgur.com/wipljF1.png'/>NoSpaces<img src='http://i.imgur.com/wipljF1.png' class='playerpreviewbig'/>NoSpaces<img src='http://i.imgur.com/wipljF1.png' class='playerpreviewbig'/>

CSS:

img {
width: 50px;
height: 50px;
padding: 0;
margin: 0;
vertical-align:top;
}

IMG default padding/margin

4 Answers4