為什麼我的圖像下方有額外的空白？

對影像標籤下神秘的空白進行故障排除

使用 調整影像大小時標籤，您可能會在影像下方遇到令人困惑的間隙。儘管徹底檢查了程式碼，這個空間的來源仍然難以捉摸。

理解基線對齊

答案在於 HTML 中基線對齊的概念。內聯元素，包括 標籤與基線對齊，它容納延伸到基線以下的字符，稱為下行字符。這可確保文字元素保持一致的垂直位置。

解決空白

要解決基線對齊導致的空白，請考慮以下解決方案：

• 應用垂直對齊： 新增垂直對齊：底部;標籤將其與容器底部對齊，消除間隙。
• 變更顯示屬性： 將 轉換為標記從內聯到區塊層級（顯示：區塊）以刪除基線對齊。
• 調整容器行高：增加容器上的行高以將內容下推，創建有足夠的空間來容納下降部分。
• 將容器字體大小設為 0： 分配字體大小： 0 到容器以消除下降器創建的任何空間。 （可選）重置子元素的字體大小。

附加說明

• 此問題並非源自邊距或填充，因此很難解決使用開發人員工具進行識別。
• 由於基線而導致內容提升造成的差距對齊。
• 其他內嵌元素（例如文字、跨度）也可能表現出此行為。

以上是為什麼我的圖像下方有額外的空白？的詳細內容。更多資訊請關注PHP中文網其他相關文章！