了解影像下方神秘的填充
即使將填充和邊距設定為零?
說明
影像被視為內聯區塊元素,類似於文字中的字元。它們遵循基線規則,即穿過大多數字母底部的一條線。但是,某些字母(例如“p”和“q”)的下降部分延伸到基線以下。為了防止這些下行部分與後續行衝突,在基線下方保留了空間。
圖像與此基線對齊,即使沒有文本,也會在底部產生額外的空間。
解決方案
要緩解此問題,請將CSS屬性vertical-align:bottom應用於映像。這會將圖像與行底部對齊,消除神秘的填充。
注意
雖然此解解決了填充問題,但如果影像小於行高。在這種情況下,影像上方可能會出現額外的空間。若要修正此問題,請將 line-height: 1px 新增至容器元素。
以上是為什麼即使邊距和填充為零,圖像也會出現意外的底部填充?的詳細內容。更多資訊請關注PHP中文網其他相關文章!