使圖像區域的無用填充

Question

http://www.milknhny.co.uk/blog/

伊夫包裹我的圖像中的黑盒子，用下面的CSS代碼：

.thumbnailwrap { 
background: #000000; 
display: table; 
} 

出於某種原因，存在在的基體的非常小的黑色區域圖像，我無法看到填充是從哪裏來的。

請問我的建議在哪裏看？由於

Answer 1

內聯元件（或多個元件可被內置顯示，如表，內聯塊，圖像等）總是對準尊重基線。這是在這句話的字母底部劃的線。有時候，雖然字母可能會降到基線以下，如在這一個（y，g，p）中。基於這個原因，底線和底線不一樣 - 否則信件的尾巴會與下面的頭尾碰撞。

這就是爲什麼以這種方式在圖像下面會出現小缺口。

個人而言，我喜歡在我的CSS中添加img{vertical-align:bottom}。對於特定的圖像，我總是可以覆蓋它（例如middle在哪裏有用），並將圖像與底線對齊。

Answer 2

如果檢查的元素，你會發現黑線從

.thumbnailwrap { background: #000} 

改變這個未來在你的CSS，你應該是好去！

Answer 3

如果你不需要背景屬性。

.thumbnailwrap { 
    background: #000000; --> Remove this from your CSS. I tested and it works 
    display: table; 
    } 

Answer 4

爲您的圖像等的規則：

.thumbnailwrap img { 
    vertical-align:top; 
}