如何消除 HTML 元素之間不必要的空白？-css教學-PHP中文網

如何消除 HTML 元素之間不必要的空白？

Barbara Streisand

發布： 2024-12-21 15:20:11

原創

354 人瀏覽過

How Can I Eliminate Unwanted Whitespace Between HTML Elements?

克服 HTML 中的空白

在 HTML 和 CSS 領域，當意外的空白破壞圖像的預期佈局或文字。不過，不用擔心，因為這個問題可以透過簡單的 CSS 技巧來解決。

CSS 解

要消除元素之間的空白，您可以使用「white」 -space-collapse' 屬性：

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

登入後複製

此命令指示瀏覽器忽略HTML 元素之間的任何空格字元。不過，要注意的是，目前還沒有瀏覽器支援此功能。

替代方法

如果您希望避免使用CSS，您可以使用不太優雅的方法添加HTML 註釋以創建無間距錯覺的方法：

<p>
  <!--
    --><img src="." alt="" /><!--
    --><img src="." alt="" /><!--
    --><img src="." alt="" /><!--
    --><img src="." alt="" /><!--
  -->
</p>

登入後複製

雖然不是理想的解決方案，但此方法有效地消除了影像之間的空白。

以上是如何消除 HTML 元素之間不必要的空白？的詳細內容。更多資訊請關注PHP中文網其他相關文章！