HTML 5 影像異常:無法解釋的底部邊距問題
使用HTML 5 時,使用者可能會遇到一個令人困惑的問題,即影像包含在DIV 元素中表現出令人費解的3px 底部邊距。儘管 CSS 中沒有明確的邊距定義,但這種異常現象仍然存在。例如,考慮以下 HTML 結構:
<div class="placeholder"> <img alt="" src="/haha.jpg" /> </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中文網其他相關文章!