为什么img标签之间存在差距？

Question

HTML

<div id="home_header_minitab">
                    <img src="topnavi_1.gif" />
                    <img src="topnavi_2.gif" />
                    <img src="topnavi_3.gif" />
                    <img src="topnavi_4.gif" />

</div>

CSS

#home_header_minitab{
    width: 100%;
    float: right;
    text-align: right;
}

和结果，

如果我删除float和text-align，它打印正常。但如果我加上那两个，就会显示出来。但要求是将图像定位在右侧。 ：（

如果我错了，我会很感激，如果有更好的方法可以直接打印图像。

Answer 1

替换的内联元素的处理方式与字符相同。

<img> <img>之间有一个空格，原因与a a之间有空格。

从HTML中删除元素之间的空格。

Answer 2

除非另有说明，HTML中的空格通常会折叠到一个空格中。所以在你的代码中，图像之间实际上有一个空格。

现在，因为img标记是内联元素，所以它们是普通文本流的一部分，因此它们看起来好像是文本元素本身 - 由空格分隔。该空间将呈现为正常空间，其正常大小在图像之间，这就是您看到它的原因。

通常有两种方法可以解决这个问题而不用自己的内联布局（例如使用浮点数）。第一种方法是简单地删除HTML中元素之间的任何空格。这是最简单，最有效的解决方案。

另一个解决方案是将字体大小更改为零，因此该空间实际上没有大小：

#home_header_minitab {
    font-size: 0;
}

请注意，如果您想要实际显示文字，或者想要回退到其他图片标题，请务必小心。