首頁 >web前端 >css教學 >為什麼 HTML5 DIV 中的圖片底部邊距為 3px,如何修復?

為什麼 HTML5 DIV 中的圖片底部邊距為 3px,如何修復?

DDD
DDD原創
2024-12-19 10:19:14430瀏覽

Why Do Images in HTML5 DIVs Have a 3px Bottom Margin, and How Can I Fix It?

修正HTML5 中影像的無法解釋的邊距問題

在HTML5 中,使用者遇到了一個意外問題,即DIV 元素中包含的影像出現無法解釋的邊距問題3px 下邊距,儘管沒有CSS 定義導致它。即使影像的高度和寬度以及 DIV 都設定為 50px,也會出現此問題。

要解決此異常,可以追溯到圖像表現得像文本中的字符,創建其下方的空格用於懸掛“y”或“g”等字符。解決方案在於利用 CSS 的垂直對齊屬性來指示不需要這樣的空間。 Vertical-align 的任何值都足夠,其中“middle”是一個流行的選擇。

在 CSS 中實現此修復:

img {
    vertical-align: middle;
}

透過合併此程式碼,圖片將丟失不需要的內容底部邊距,導致預期的行為。實際示範請參考這個更新後的jsFiddle:http://jsfiddle.net/fRpK6/1/。

以上是為什麼 HTML5 DIV 中的圖片底部邊距為 3px,如何修復?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn