Html 额外的3件装从哪里来？

我添加了一个白色背景来显示它的位置。我如何删除额外的3件？我不想将高度设置为特定的量，因为我希望它是成比例的，并且缩放最大值是400x250px。目前的高度是253px，我希望它的图像大小是250px

jsFiddle：

HTML:

只需将display:block添加到img：

只需将display:block添加到img：

您的图像是内联的。因此，它与基线对齐。因此出现了空白。杀死空间的许多方法包括：

垂直对齐：将图像居中对齐。小提琴： 显示：阻止您的图像。小提琴： 字体大小：0px；在您的体形和字体大小上：npx在您的提琴上： 您的图像是内联的。因此，它与基线对齐。因此出现了空白。杀死空间的许多方法包括：

垂直对齐：将图像居中对齐。小提琴： 显示：阻止您的图像。小提琴： 字体大小：0px；在您的体形和字体大小上：npx在您的提琴上：

---

你有没有试着检查这些元素，这就是为什么会发生的原因！3px是空白的基线。您可以检查是否将字体大小：0放入公文包类。或者删除公文包div中的任何空白。您是否尝试检查了发生这种情况的原因！3px是空白的基线。您可以检查是否将字体大小：0放入公文包类。或者删除公文包div中的任何空白。但是额外的空间从何而来？没有理由浮动图像，只需要覆盖应用于img标记的默认内联块，但额外的空间从何而来？没有理由浮动图像，只需覆盖应用于img标记的默认内联块

<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>

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;
}

.entry img{
  display: block;
}