為什麼程式碼中兩個`display`屬性為`inline-block`的元素之間有多餘字元（包括換行、製表符等）會造成頁面中這兩個元素之間有空隙？解決方案是什麼？替代方案又都有哪些？

王铁柱6發表於2024-12-11
inlineBloC字元

display: inline-block 元素之間的空隙是由 HTML 原始碼中的空格、換行符和製表符引起的。瀏覽器會將這些空白字元渲染成一個空格，就像普通的文字一樣。由於 inline-block 元素像行內元素一樣排列，它們之間的空格也會被保留並顯示出來。

解決方案：

  1. 移除 HTML 原始碼中的空白字元: 最直接的方法是刪除元素之間的所有空格、換行符和製表符。這可以透過手動刪除或使用程式碼格式化工具來實現。

    <span style="display: inline-block;">元素1</span><span style="display: inline-block;">元素2</span>

  2. 設定父元素的 font-size 為 0: 將父元素的字型大小設定為 0，可以消除子元素之間的空格。然後，為子元素單獨設定字型大小即可。

    <div style="font-size: 0;">
    <span style="display: inline-block; font-size: 16px;">元素1</span>
    <span style="display: inline-block; font-size: 16px;">元素2</span>
</div>

  3. 使用 HTML 註釋: 在元素之間新增 HTML 註釋可以消除空格。

    <span style="display: inline-block;">元素1</span><!--
--><span style="display: inline-block;">元素2</span>

  4. 使用負 margin: 為元素設定一個小的負 margin 值，可以將元素拉近，從而消除空格。需要注意的是，這個方法需要根據實際情況調整 margin 值，並且可能會導致佈局問題。

    <span style="display: inline-block; margin-right: -4px;">元素1</span>
<span style="display: inline-block;">元素2</span>

替代方案：

  1. 使用 flexbox 佈局: Flexbox 提供了更靈活的佈局方式，可以輕鬆控制元素之間的間距，並且不會受到 HTML 原始碼中空白字元的影響。

    <div style="display: flex;">
    <span style="display: block;">元素1</span>
    <span style="display: block;">元素2</span>
</div>

  2. 使用 grid 佈局: Grid 佈局也提供了強大的佈局能力，可以精確控制元素的位置和大小，同樣不會受到 HTML 原始碼中空白字元的影響。

    <div style="display: grid; grid-template-columns: auto auto;">
    <span style="display: block;">元素1</span>
    <span style="display: block;">元素2</span>
</div>

  3. 使用 float 佈局: 雖然 float 佈局可以實現類似的效果，但它比較複雜，容易出現佈局問題，不推薦使用。

最佳實踐：

推薦使用 flexbox 或 grid 佈局來替代 inline-block，它們更靈活、更強大，並且可以避免 HTML 原始碼中空白字元帶來的問題。如果必須使用 inline-block，建議移除 HTML 原始碼中的空白字元或設定父元素的 font-size 為 0。

總而言之，理解了 inline-block 元素之間空隙產生的原因，才能更好地選擇合適的解決方案或替代方案，從而建立更精確、更穩定的網頁佈局。

相關文章