為什麼空的內聯塊 Div 有高度？

為什麼Inline-Block 為空Div 設定高度

當空div 元素被指派顯示屬性「inline-block」時，它意外地表現出高度增加，這種現像在「display:block」中不會發生。這種看似矛盾的行為源自於內聯塊格式的固有特徵。

內聯區塊中的行高計算

將元素設定為內聯區塊後，行高計算發生了轉變。內聯塊不是對齊文字的底部，而是對齊底部、頂部或兩者。

空內聯塊的行高

對於空內聯塊元素，行高計算源自與元素相關的字體規格。但是，由於沒有文字內容，這會導致元素根據從其父元素（通常是正文）繼承的字體大小假定基本行高。

修復空內聯-塊高度

為了消除由繼承的行高引起的不需要的高度，可以使用一個包裝元素，將字體大小顯式設定為0，從而有效地取消任何行高計算：

更新：空內聯區塊的高度

需要注意的是，空內聯塊元素的高度沒有官方文件。然而，觀察揭示了一種模式。

最小行距保留

無論是否有內容，內聯塊元素似乎都會保留最小行距。此空間基於從父元素繼承的行高。

含義

此行為表明 inline-block 本質上期望內容並保留默認行空間為了它，即使它是空的。雖然這與零高度空行框的 W3 規範相矛盾，但這是內聯區塊格式特有的怪癖。

以上是為什麼空的內聯塊 Div 有高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！