如何解释CSS与图像之间的空白区域？

Question

我想在CSS中使用宽度来缩放我的图像，以便我的图像能够响应。我希望屏幕上可以显示3张图像，最大宽度可以达到一定宽度，但是在将宽度设置为33.3％后，它们之间的空白区域会减少一个。我仍然喜欢图像之间的小空白区域，但我希望图像跨越容器宽度的100％。我该如何解决这个问题？

img{ 
    width:33.3%; 
} 

例子： http://jsfiddle.net/ErNeT/1736/

Answer 1

首先，确保所有的HTML元素具有盒大小属性设置为边界框。这可以确保填充和边框包含在元素的总宽度和高度中。 source

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

您可以通过更改为5px成另一种宽度改变多少差距，你希望他们之间。

Answer 2

你可以在容器上设置font-size: 0;删除空格，如果你只需要支持回IE9可以使用calc()计算与边缘的宽度。或者你可以使用flexbox，如果你只需要支持现代浏览器！都在这里的

例子： http://jsfiddle.net/s3cmnpo3/

Answer 3

试试这个：

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