多餘的3px從哪裏來？

Question

我添加了白色背景以顯示它在哪裏。我如何刪除多餘的3像素？我不想將高度設置爲特定的數值，因爲我希望它的比例和比例（最大爲400x250像素）。目前的高度是253像素，我希望它是250像素的圖像大小。

的jsfiddle：http://jsfiddle.net/e2odqw5u/

HTML：

<div class="portfolio"> 
    <figure class="entry"> 
     <img src="http://www.robertfikesiv.com/images/Gallery/Graphic/thumb/Bad-Panda2.jpg"/> 
     <div class="hover">TEST</div> 
    </figure> 
</div> 

CSS：

body{ 
    background: #000; 
} 

.portfolio{ 
    padding: 0px 10px 0px; 
    margin: auto; 
    max-width: 1600px; 
    overflow: hidden; 
} 

.figure{ 
    margin: 0px; 
    padding: 0px; 
} 

.entry{ 
    position:relative; 
    float:left; 
    cursor: pointer; 
    background: #fff; 
    padding: 0px; 
    margin: 0px; 
    max-width: 400px; 
} 

.hover { 
    background:rgba(0,0,0,.9) ; 
    position:absolute; 
    top:0px; 
    left:0px; 
    bottom:0px; 
    right:0px; 
    opacity:0; 
    -webkit-transition:all .2s ease-out; 
    -moz-transition:all .2s ease-out; 
    -ms-transition:all .2s ease-out; 
    -o-transition:all .2s ease-out; 
    transition:all .2s ease-out; 
} 

.entry:hover .hover{ 
    opacity: 1; 
} 

figure > div { 
    padding-top:25%; 
    text-align: center; 
    color:#fff; 
} 

Answer 1

您的圖像是inline。因此它與基線一致。因此，白色的空間。殺死這個空間的方法很多：

1. vertical-align:middle你的形象。小提琴：http://jsfiddle.net/abhitalks/e2odqw5u/10/
2. display: block您的圖片。小提琴：http://jsfiddle.net/abhitalks/e2odqw5u/11/
3. font-size: 0px;您的figure和font-size: npx在您的div。小提琴：http://jsfiddle.net/abhitalks/e2odqw5u/12/

Answer 2

只需添加display: block到img：

.entry img{ 
    display: block; 
} 

FIDDLE