css无法删除图像之间的空格

Question

我在一个div中有9个图像。线条之间有空格（请参见下图）。我需要删除它们。你能帮我吗？

<div style="margin:0;padding:0;border:0;">
                <img src=".../1.jpg" style="margin:0;padding:0;border:0;"><!--
                --><img src=".../2.jpg" style="margin:0;padding:0;border:0;"><!--
                --><img src=".../3.jpg" style="margin:0;padding:0;border:0;"><!--
                --><img src=".../4.jpg" style="margin:0;padding:0;border:0;"><!--
                --><img src=".../5.jpg" style="margin:0;padding:0;border:0;"><!--
                --><img src=".../6.jpg" style="margin:0;padding:0;border:0;"><!--
                --><img src=".../7.jpg" style="margin:0;padding:0;border:0;"><!--
                --><img src=".../8.jpg" style="margin:0;padding:0;border:0;"><!--
                --><img src=".../9.jpg" style="margin:0;padding:0;border:0;">
</div>  

更新

Answer 1

你的图像分开了。换行符字符被浏览器视为空格，例如

<img>[linebreak char here]
<img>

呈现为

<img> <img>
     ^---- linebreak converted to space

如果你想让他们完全相互对抗，你将不得不消除空白：

<img><img><img>...
     ^--no space at all

Answer 2

有很多种方法，但在你的情况下有一种非常快捷的方式，因为容器div中没有任何文本，就是这样做：

div { /* your inline images container div with no text */
    font-size: 0;
}

这将使内联img元素之间的现有空白区域不占用渲染布局中的任何空间。

但即使您要在此div中包含文字，只需恢复包含该文字的元素的文字大小，例如：对于此span中的div：

div span {
    font-size: 16px;
}

Answer 3

您需要在一行上制作图像：

<div>
   <img src="img1.jpg"><img src="img2.jpg"><img src="img3.jpg"><img src="img4.jpg">
</div>

或者使用html评论：

<div>
   <img src="img1.jpg"><!--
--><img src="img2.jpg"><!--
--><img src="img3.jpg"><!--
--><img src="img4.jpg"><!--
</div>

Answer 4

您是否拥有彼此重叠的图像？通常它们之间有3px的余量。将它们的样式设置为显示：块修复此问题。