如何解釋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; 
}