Images Side By Side Without Any Space Between Them

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 ide

Solution 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" />

Solution 2:

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

Solution 3:

If you use float: left on the images, and separate each row with a breaker with a clear: both then there should be no spaces between the images.

Solution 4:

The parameters you need to zero are padding, border and margin. On the images themselves and any container in between.

Solution 5:

Try putting two images on the same line like:

<img src="imgs/img0.jpg" style="margin: 0; width: 300; height: 300;" /><img src="imgs/img1.jpg" style="margin: 0; width: 300; height: 300;" />

and see if that changes anything. I also suggest you follow the advice about using CSS to simplify all of the image styles. Because right now, you'd have to manually change every value by hand if you wanted to change the image sizes.

Unfortunately, HTML has some silly white-space problems sometimes.