為什麼空的內聯區塊 div 在隱藏容器內會增加高度？

使用 inline-block 時，隱藏容器內的空內聯 div 元素會奇怪地獲得高度。與 display:block 的行為相反，為什麼會發生這種情況？

Display:inline-block 在元素上賦予特定的格式：

• 內聯級格式：元素被放置在容器區塊內水平向外。
• 行高計算：行內元素的行高計算方式不同。對於內聯塊元素，它成為邊距框的高度。對於普通的內聯元素，它是 'line-height' 屬性。

當 inline-block 元素為空時，即使沒有字體或文字內容，它也會採用其基本行高。這會導致元素獲得較小但明顯的高度，儘管處於空狀態。

防止此高度問題的解決方法是使用font-size:0 的包裝器來消除行高計算：

.wrapper {
    font-size: 0;
}

.wrapper div {
    font-size: medium;
   
}

更新：了解內聯塊高度

與最初的假設相反，空內聯塊元素的確切高度沒有正式記錄。然而，觀察和測試表明：

• 內聯塊根據繼承的行高保留最小行空間，通常由 確定。元素。
• 即使內聯塊為空，該行空間仍然存在，並且理論上根據 CSS 規範應將其視為零高度。

以上是為什麼空的內聯區塊 div 在隱藏容器內會增加高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！