為什麼我的 HTML5 圖像有神秘的 3px 底部邊距？

HTML5 Enigma：顯示意外利潤的​​圖片

考慮將網站轉換為 HTML5 時遇到的特殊問題。出乎意料的是，DIV 元素中包含的每個圖像都顯示出令人費解的 3px 底部邊距，儘管 CSS 中沒有這樣的邊距。儘管進行了廣泛的檢查，但這種異常的原因仍然難以捉摸。

當影像被指定為 50x50 像素的尺寸，而包含的 DIV 元素 (

) 配置為顯示時，此問題的表現變得明顯： 桌子。有趣的是，.placeholder 的高度尺寸可疑地增加到了 53 像素。

解謎題

解決這令人困惑的行為在於理解影像的固有特徵HTML。預設情況下，圖像的行為類似於文字字符，從而在圖像下方為“y”或“g”等字母的假設“尾部”保留空間。為了修正這個問題，可以使用CSS屬性vertical-align來指示沒有這種額外的垂直間距。

實現

為了消除不需要的底部邊距，只需合併以下CSS規則：

img {
    vertical-align: middle;
}

透過指定vertical-align的值，影像在其父級中的垂直對齊方式元素被調整，有效地中和了保留的空間。

視覺驗證

這個解決方案在更新的 jsFiddle 中得到了優雅的演示：[提供連結]。

以上是為什麼我的 HTML5 圖像有神秘的 3px 底部邊距？的詳細內容。更多資訊請關注PHP中文網其他相關文章！