css不能删除图片之间的空格答案

【问题标题】：css cannot delete spaces between imagescss不能删除图片之间的空格
【发布时间】：2014-12-09 03:13:19
【问题描述】：

我在一个 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>

更新：

【问题讨论】：

能否请您创建一个包含您的 CSS 的小提琴。

标签： css

【解决方案1】：

您的图像位于不同的行上。换行符被浏览器视为空格，例如

<img>[linebreak char here]
<img>

呈现为

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

如果您希望它们完全相互对抗，则必须消除空格：

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

【讨论】：

很好的解决方案马克，谢谢。现在我在 div 中有 3 行，每行有 3 个图像，图像之间没有空格。唯一的问题是行之间有空格。请检查我更新的问题，里面有图片。
如果你想让他们在自己的线路上，你也可以做类似<img><img><img>...之类的事情。
强制margin:0;padding:0;border:0 在他们身上。每个图像都可以被视为内联<p> 或其他任何内容，它们下方有空格。
我把它放在 div 和每张图片上，但结果是一样的。

【解决方案2】：

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

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

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

但即使您要在此 div 中包含文本，也只需恢复包含文本的元素的文本大小，例如在这个div 里面有一个span：

div span {
    font-size: 16px;
}

【讨论】：

很好，它可以工作:) 但是如果我以后需要在这些图像上添加文本怎么办。对于这种情况，您有其他解决方案吗？

【解决方案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>

【讨论】：

【解决方案4】：

您是否有相互重叠的图像库存？通常它们之间有 3px 的边距。将它们的样式设置为 display:block 可以解决此问题。

【讨论】：