圖像下方的神秘空間：揭開原因和解決方案
當圖像顯示為內聯塊元素時，你可能會遇到一個令人困惑的場景：儘管將填充和邊距設為零，但它們下方仍會出現空白空間。這種令人費解的現像源自於內聯塊元素的固有行為，它們類似於文本中的字元。
就像字母有表示字元底線的基線一樣，影像也與該基線對齊。因此，即使沒有側翼文本，圖像也會與基線對齊，由於為“p”和“q”等字母上的尾部保留了保留空間，因此會導致下方出現間隙。
要解決此問題，我們可以利用 Vertical-align:bottom 的力量。此 CSS 屬性將圖像錨定到行的底部，有效地消除了揮之不去的空白。
img {
vertical-align:bottom;
}對於小於行高的影像，需要進行細微的調整。在容器元素中引入 line-height:1px 可以消除影像上方任何潛在的空間侵入。
採用這些簡單的調整可確保影像緊貼在其分配的空間內，而不會在其下方出現神秘的空白區域。
以上是為什麼內聯塊影像下方有額外的空間，如何修復它？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
