如何有效删除 HTML 元素之间的空格？

忽略 HTML 中的空白：“white-space-collapse”属性

尽管 HTML 和 CSS 很流行，但令人惊讶的是，不是指示浏览器忽略空格的直接方法。当图像等元素被不需要的空格错误地分隔时，这可能会导致令人沮丧的情况。

“white-space-collapse”属性

虽然没有普遍适用的属性支持的解决方案，CSS 属性“white-space-collapse”提供了一种有前途的方法。通过在图像的父元素上将此属性设置为“丢弃”，您可以有效地消除它们之间的任何空白。

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

缺点

不幸的是，这该解决方案受到一个重大缺陷的阻碍：（据目前所知）没有主要浏览器实现了“white-space-collapse”属性。这意味着尽管它具有潜在的有效性，但广泛使用仍然不切实际。

替代解决方案

作为替代方案，您可以在图像之间添加 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中文网其他相关文章！