為什麼 `display: inline-block` 在隱藏的 Div 上方創造一個間隙？

為什麼Inline-Block 會為隱藏的Div 添加高度

在

上使用display: inline-block 時元素，當包含元素被隱藏時，可能會在元素上方遇到意外的間隙。使用 display: block 不會發生此行為。

為什麼會發生這種情況？

display: inline-block 更改行高計算。在內聯格式化上下文中，內聯區塊元素的高度是基於其「line-height」屬性。對於空的內聯塊元素，這會轉換為它們的基本行高，即使它們沒有可見的內容。

間隙背後的原因

因此，一個空的inline-block 根據其繼承的行高（通常來自

）保留最小行空間。元素。當其容器不可見時，此保留空間表現為元素上方的間隙。

快速修復

要消除此間隙，一個快速解決方案是包裝內聯-block 包裝器中的元素明確設定 font-size: 0。這確保沒有字體和行高，從而導致空的內聯塊沒有高度。

更新

官方文件中沒有明確定義空內聯塊元素的高度。不過，根據測試，可以這樣理解：

• 空空間：內聯塊元素為潛在內容保留一個行框。
• 繼承的行高：這個行框是基於從父元素繼承的行高，包括;元素。
• 最小行距： 儘管空內聯塊在技術上不存在用於格式化目的，但它們仍然保留最小行距。

以上是為什麼 `display: inline-block` 在隱藏的 Div 上方創造一個間隙？的詳細內容。更多資訊請關注PHP中文網其他相關文章！