缩进 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

这是因为 inline 项之间的白色 space。 HTML 中的 inline 项之间的白色 space 在 screen.As 图像上可见=] 标签。而在第二个示例代码中，它们之间是 space（新行），这将在 HTML.

中显示为字符（即 space）

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

Answer 2

这似乎是一个与元素设置为 display 作为 inline-blocks 有关的问题，它占了空格。虽然 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/

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

Difference between Indented HTML and Inlined HTML

html

css

inline

render

indentation