如何消除 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中文網其他相關文章！