為什麼我的內嵌影像標籤下方有意外的空白？

圖像標籤下神秘的空白已解決

您最近修改了網站的標題圖像，從CSS 背景圖像切換為內聯圖像圖像元素。雖然影像現在按預期縮放，但您在其下方遇到了意外的 10 像素間隙。

使用 Chrome 的檢查器但未能找出原因後，您向線上論壇尋求協助。一種建議的解決方案是基於印刷下行字母的概念。

下行字母是延伸到文字基準以下的字母，例如「j」、「g」、「p」和「y」。預設情況下，像影像這樣的內聯元素遵循基線對齊，這考慮了下行所需的空間。

解決方案：

• 設定垂直- align：bottom to the img tag: 這會將影像與容器的底部對齊，消除白色space.
• 將display: inline 改為display: block: 這會將 img 標籤轉換為區塊級元素，刪除其基線對齊方式。
• 調整容器的 line-height 屬性： 將 line-height 設定為 0 可以消除間隙。
• 在容器上設定字體大小：0：這也消除了基線對齊，但可能需要恢復子元素上的字體大小。

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