儘管沒有顯式 CSS，為什麼我的 HTML5 圖像底部邊距為 3 像素？

HTML 5 影像異常：無法解釋的底部邊距問題

使用HTML 5 時，使用者可能會遇到一個令人困惑的問題，即影像包含在DIV 元素中表現出令人費解的3px 底部邊距。儘管 CSS 中沒有明確的邊距定義，但這種異常現象仍然存在。例如，考慮以下 HTML 結構：

<div class="placeholder">
    <img src="/static/imghwm/default1.png" data-src="/haha.jpg" class="lazy" alt="">
</div>

.placeholder DIV 擁有 display: table 樣式，影像的尺寸保持在 50x50px。然而，.placeholder DIV 神秘地垂直擴展至 53px。這種意外的行為讓許多尋求解決方案的開發者感到困惑。

解決方案：垂直對齊

這種異常的根本原因在於將圖像作為文字字元處理，導致下面有一個不需要的空間，類似於「y ”或“g”等字母的下行部分所佔據的空間。為了解決這個問題，CSS 垂直對齊屬性確保不會指派這樣的空間。實際上，vertical-align 的任何值都足夠，其中 middle 是一種流行的選擇。

img {
    vertical-align: middle;
}

實作此解決方案有效地消除了 3px 下邊距並解決了影像顯示問題。如更新的 jsFiddle 所示，圖像及其周圍的 DIV 現在顯示其預期尺寸，而圖像下方沒有特殊的空白空間。

以上是儘管沒有顯式 CSS，為什麼我的 HTML5 圖像底部邊距為 3 像素？的詳細內容。更多資訊請關注PHP中文網其他相關文章！