使用CSS删除图像之间的空间[重复]答案

【问题标题】：Use CSS to remove the space between images [duplicate]使用CSS删除图像之间的空间[重复]
【发布时间】：2011-11-30 07:09:26
【问题描述】：

给定：

<img src="..."/>
<img src="..."/>

结果是两个图像之间有一个空格。似乎正常行为是将任意数量的空格、换行符和制表符显示为单个空格。我知道我可以做到以下几点：

<img src="..."/><img src="..."/>

或

<img src="..."/><!--
--><img src="..."/>

或

<img src="..."/
><img src="..."/>

或任何数量的其他黑客。有没有办法用 CSS 删除那个空格？例如

<div class="nospace">
    <img src="..."/>
    <img src="..."/>
</div>

【问题讨论】：

标签： html css

【解决方案1】：

在您的 CSS 中将它们设为 display: block。

【讨论】：

更好的是，float: left 他们需要彼此相邻。制作<img>s display: block 的另一个好处是神秘的底部边距也会消失。
float:left 的作用就像一个魅力
有关“图像、表格和神秘间隙”的更多信息，请参阅developer.mozilla.org/en/Images,_Tables,_and_Mysterious_Gaps
如果使用float: left，还值得将clear: both 添加到图像下方的容器元素中，以避免时髦的重叠布局等。
使用浮点数就像打开潘多拉的盒子。一个可以满或蠕虫。最好的解决方案是 @daniel-a-white 提供的：将它们显示为块

【解决方案2】：

一种几乎在任何地方都兼容的简单方法是在容器上设置font-size: 0，前提是您没有需要设置样式的任何后代文本节点（尽管在需要时覆盖它很简单）。

.nospace {
   font-size: 0;
}

您还可以将默认的display: inline 更改为block 或inline-block。请务必使用workarounds required for inline-block 正常工作。

【讨论】：

【解决方案3】：

我更喜欢这样做

img { float: left; }

去除图像之间的空间

【讨论】：

【解决方案4】：

我为此找到的最佳解决方案是将它们包含在父 div 中，并将该 div 的字体大小设置为 0。

【讨论】：

【解决方案5】：

我发现唯一适合我的选择是

font-size:0;

我也在使用 overflow 和 white-space: nowrap; float: left; 似乎把事情搞砸了

【讨论】：

为什么这会得到支持？ 5 年前，alex 给出了相同的答案。
@jpoppe Stack Overflow 优先考虑最近修改/编辑的帖子/答案。如果您与下面 alex 的答案进行比较，您会发现只有这个答案被修改了，而 alex 的没有。