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

【问题标题】：Images side by side without any space between them图像并排并排，它们之间没有任何空间
【发布时间】：2011-06-07 20:57:20
【问题描述】：

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

我已经尝试将图像的padding 和margin 设置为0px，但没有成功。

有什么想法吗？

【问题讨论】：

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

<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 有时会出现一些愚蠢的空白问题。

【讨论】：

【解决方案3】：

确保您的 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" />

【讨论】：

【解决方案4】：

需要归零的参数是内边距、边框和边距。在图像本身以及介于两者之间的任何容器上。

【讨论】：

【解决方案5】：

如果您在图像上使用float: left，并用带有clear: both 的分隔符分隔每一行，则图像之间不应有空格。

【讨论】：