静态html中图像之间的空间在javascript中消失

space between images in static html disappears in javascript

本文关键字：javascript 空间 消失 之间 html 图像 静态      更新时间：2023-09-26

我正在努力理解为什么当我的代码切换到javascript时，空白会消失。

这是用静态html JSFiddle基本

这里的javascript JSFiddle javascript 中的"相同"

当我在css中为静态html设置font-size:0px;时，我得到了与javascript中相同的结果。我只是不确定为什么会发生这种情况，我想了解一下。javascript与html/CSS有什么不同？

提前感谢！

我认为这是因为javascript将每个节附加在前一节的结束标记之后，在前一段的结束标记和下一段的开始标记之间不留空格。

HTML版本：

<section>
    <!-- content -->
</section>
<section>
    <!-- content -->
</section>

JS版本：

<section><!-- content --></section><section><!-- content --></section>

这是因为在基本html中，有新行分隔部分元素：

<section class="pic"></section>
<section class="pic"></section>

在使用JavaScript的方法中，它们被粘在一行：

<section class="pic"></section><section class="pic">

您可以阅读本文以更新有关如何避免内联块之间的间距的知识：https://css-tricks.com/fighting-the-space-between-inline-block-elements/

相关文章：