為什麼即使邊距和填充為零，圖像也會出現意外的底部填充？

了解影像下方神秘的填充

即使將填充和邊距設定為零？

說明

影像被視為內聯區塊元素，類似於文字中的字元。它們遵循基線規則，即穿過大多數字母底部的一條線。但是，某些字母（例如“p”和“q”）的下降部分延伸到基線以下。為了防止這些下行部分與後續行衝突，在基線下方保留了空間。

圖像與此基線對齊，即使沒有文本，也會在底部產生額外的空間。

解決方案

要緩解此問題，請將CSS屬性vertical-align：bottom應用於映像。這會將圖像與行底部對齊，消除神秘的填充。

注意

雖然此解解決了填充問題，但如果影像小於行高。在這種情況下，影像上方可能會出現額外的空間。若要修正此問題，請將 line-height: 1px 新增至容器元素。

以上是為什麼即使邊距和填充為零，圖像也會出現意外的底部填充？的詳細內容。更多資訊請關注PHP中文網其他相關文章！