修正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中文網其他相關文章!