<a>比<img>孩子

較高正如你可以看到here橫幅圖像有一定的高度（響應），但它有一個覆蓋（#vignette），這是嵌套在一個標籤內的橫幅圖像一起。 #vignette從其父得到高度：<a>比<img>孩子

#vignette { 
    box-shadow: inset 0 0 50px 4px rgba(0,0,0,0.35), inset 0 10px 10px rgba(0,0,0,0.05); 
    position: absolute; 
    display: block; 
    width: 100%; 
    height: 100%; 
    left: 0; 
    top: 0; 
}

和A-標籤的高度調整到它的內容：

a#banner-image { 
    display: block; 
    position: relative; 
    width: auto; 
    height: auto; 
}

那麼如何是它可能是一個標籤比圖像高本身？似乎無法解決這個問題。謝謝。

來源

2012-06-28 Bram Vanroy

[爲什麼div內的圖像在圖像下面有額外的空間？]的確切副本（http://stackoverflow.com/questions/5804256/why-an-image-inside-a-div-has-an -extra-space-below-the-image） – lanzz

確保img顯示爲塊元素。

a#banner-image img { 
    display: block; 
}

正如@Ianzz正確指出的，這是因爲所有內聯元素都存在下行空間問題。

來源

2012-06-28 11:12:01 Greg

這不是相鄰空格的問題，而是所有內聯元素的下空間。 – lanzz

謝謝！從來沒有img不會被顯示爲塊。 –

回答

相關問題