图像并排，它们之间没有任何空间

Question

我有一个图像网格，它们之间有空格。如何删除此空间？

我已尝试将图片的padding和margin设置为0px，但它无效。

有什么想法吗？

Answer 1

确保您的html标记中没有任何空格。所以改变：

<img src="" alt="" /> <img src="" alt="" />

到

<img src="" alt="" /><img src="" alt="" />

有时空格也可以隐藏在新行的末尾，所以如果你的html看起来像是

，请务必查看行尾。

<img src="" alt="" /> 
<img src="" alt="" />

修改

而不是写<img src="imgs/img8.jpg" style="margin: 0; width: 300; height: 300;" /> 87次，只需将它放在你的css文件中：

div img { margin: 0;
    width: 300px;
    height: 300px;
}

然后您只需制作图片<img src="imgs/img8.jpg" alt="img8" />

即可

Answer 2

将font-size:0px添加到div中，然后您可以继续将img元素保存在不同的代码行中

Answer 3

如果您对图像使用float: left，并使用clear: both的断路器分隔每一行，则图像之间应该没有空格。

Answer 4

您需要归零的参数是填充，边框和边距。关于图像本身和它们之间的任何容器。

Answer 5

尝试将两张图片放在同一行上，如：

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

并查看是否有任何改变。我还建议您遵循有关使用CSS简化所有图像样式的建议。因为现在，如果你想改变图像尺寸，你必须手动手动更改每个值。

不幸的是，HTML有时会出现一些愚蠢的空白问题。