首頁 > web前端 > css教學 > 為什麼我的 HTML5 圖像有神秘的 3px 底部邊距?

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

Mary-Kate Olsen
發布: 2024-12-19 20:24:15
原創
700 人瀏覽過

Why Do My HTML5 Images Have a Mysterious 3px Bottom Margin?

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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板