如何解释 CSS 中间图像中的白色 space？

Question

我正在尝试使用 CSS 中的宽度来缩放我的图像，以便我的图像能够响应。我想在屏幕上显示 3 张图像，最大宽度达到某个最大宽度，但在将宽度设置为 33.3% 后，它们之间的白色 space 将其中一张打倒。我仍然喜欢图像之间的小白色 space，但我希望图像跨越其容器宽度的 100%。我该如何解决这个问题？

img{
    width:33.3%;
}

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

Answer 1

你可以在容器上设置font-size: 0;来去除空白，如果你只需要支持回到IE9你可以使用calc()来计算宽度和边距。或者如果你只需要支持现代浏览器，你可以使用 flexbox！

两者的示例如下： http://jsfiddle.net/s3cmnpo3/

Answer 2

试试这个：

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

Answer 3

首先，确保所有 HTML 元素的 box-sizing 属性设置为 border-box。这确保填充和边框包含在元素的总宽度和高度中。source

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

您可以通过将 5px 更改为另一个宽度来更改它们之间的间距。

如何解释 CSS 中间图像中的白色 space？

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

html

css

image

width