Images side by side without any space between them

Question

I have a grid of images with space between them. How do I remove this space?

I have already tried setting the padding and margin of the images to 0px but it has not worked.

Any ideas?

Answer 1

Make sure you don't have any spaces in your html markup. So change:

<img src="" alt="" /> <img src="" alt="" />

to

<img src="" alt="" /><img src="" alt="" />

Sometimes spaces can hide at the end of new lines too, so be sure to check the end of lines if your html looks like

<img src="" alt="" /> 
<img src="" alt="" />

Edit

Instead of writing: <img src="imgs/img8.jpg" style="margin: 0; width: 300; height: 300;" /> 87 times, just put this in your css file:

div img { margin: 0;
    width: 300px;
    height: 300px;
}

and then you can simply make your images <img src="imgs/img8.jpg" alt="img8" />

Answer 2

add font-size:0px to the div, then you can continue keeping the img elements on separate code lines