How do I account for the white space in-between images with CSS?

Question

I am trying to scale my images using width in CSS so that my images will be responsive. I would like to have 3 images across the screen up to a certain max-width, but the white space in between them knocks one down after setting width to 33.3%. I'd still like the small white space between the images, but I want the images to span across 100% of the width of it's container. How do I fix this issue?

img{
    width:33.3%;
}

Example: http://jsfiddle.net/ErNeT/1736/

Answer 1

You could set font-size: 0; on the container to remove the whitespace, and if you only need to support back to IE9 you can use calc() to calculate the width with the margin. OR you could use flexbox if you only need to support modern browsers!

Examples of both here: http://jsfiddle.net/s3cmnpo3/

Answer 2

First, ensure that all HTML elements have the box-sizing property set to border-box. This makes sure that the padding and border are included in the total width and height of the elements.source

img{
  box-sizing: border-box;
  border: 5px solid transparent;//keep your little margins by transparent borders 5px wide
}

You can change how much gap do you want between them by changing 5px into another width.

Answer 3

Try this:

img{
    width:33.3%;
    float: left;
}