缩进HTML和内联HTML之间的区别

Question

我正在重写客户端网页，我在HTML渲染方面遇到了一些问题。

下一个代码是旧的HTML，所有“a”和“img”标签都在这样的一行中（INLINE IMG）：

<div id="inside-img">
    <div class="img" style="width:8643px"><a href=""><img src=""/></a><a href=""><img src=""/></a>... ...</div>
</div>

当我重写这个时，有更好的缩进（INDENTED IMG）：

<div id="inside-img">
    <div class="img" style="">
        <a href=""><img src=""/></a>
        <a href=""><img src=""/></a>
        ...
   </div>
</div>

HTML的输出会在您附加的图像中看到。

有很多图像和最后一张图像，向下移动而不是在时间轴的末尾。我不知道为什么当我缩进HTML，改变HTML格式时。

Answer 1

这似乎与设置为display的元素相关的问题为inline-block s，它占空白。 虽然OP不提供与标记关联的任何CSS，但这应该有效：

<div id="inside-img">
    <div class="img" style="font-size:0;">
        <a href=""><img src=""/></a>
        <a href=""><img src=""/></a>
        ...
   </div>
</div>

或者这（注意额外的评论）

<div id="inside-img">
    <div class="img" style="">
        <a href=""><img src=""/></a><!--
        --><a href=""><img src=""/></a><!--
        -->...
   </div>
</div>

有关完整说明，请参阅https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Answer 2

这是因为inline项之间的空格。 HTML中的inline项之间的空格在屏幕上可见。由于图像是内联项，因此您的第一个代码示例在HTML标记之间没有任何空格。而在第二个示例代码中，它们是它们之间的空格（新行），它将在HTML中显示为字符（即空格）。

可能的解决方法是在父Font-size: 0;上使用div。