如何消除 HTML 元素之间不需要的空白？

克服 HTML 中的空白

在 HTML 和 CSS 领域，当意外的空白破坏图像的预期布局或文本。不过，不用担心，因为这个问题可以通过简单的 CSS 技巧来解决。

CSS 解决方案

要消除元素之间的空白，您可以使用“white” -space-collapse' 属性：

#parent_of_imgs { white-space-collapse: discard; }

此命令指示浏览器忽略 HTML 元素之间的任何空格字符。不过，需要注意的是，目前还没有浏览器支持此功能。

替代方法

如果您希望避免使用 CSS，您可以使用不太优雅的方法添加 HTML 注释以创建无间距错觉的方法：

<p>
  <!--
    --><img src="/static/imghwm/default1.png" data-src="." class="lazy" alt=""><!--
    --><img src="/static/imghwm/default1.png" data-src="." class="lazy" alt=""><!--
    --><img src="/static/imghwm/default1.png" data-src="." class="lazy" alt=""><!--
    --><img src="/static/imghwm/default1.png" data-src="." class="lazy" alt=""><!--
  -->
</p>

虽然不是理想的解决方案，但此方法有效地消除了图像之间的空白。

以上是如何消除 HTML 元素之间不需要的空白？的详细内容。更多信息请关注PHP中文网其他相关文章！