删除img顶部的额外边距

Question

如何让img进入父div的顶部？ 顶部似乎总有一个额外的px行。 在小提琴中，图像在div之外向下移动，而不是在内部很好地适应。 它们具有相同的高度。

在某些情况下，img比div短，在这种情况下，它应该以等于其上方和下方的父背景为中心。

http://jsfiddle.net/AqJWa/1/

.wrapper{
     width: 140px;
    height: 110px;
    line-height: 110px;
    text-align: center;
    background:red;
    padding:0px;
}


img{
   max-height:110px; 
     max-width:140px; 
     vertical-align: middle;
     margin:0px;
     border:0;  
}

<div class = "wrapper"><img src = 'http://images.tastespotting.com/thumbnails/650041.jpg' alt ="" /></div>

Answer 1

看来div中有隐藏文本（即空格/换行符）。

尝试为.wrapper div添加font-size:0 。 http://jsfiddle.net/y3mNX/

Answer 2

减少行高：100px; 在.wrapper类中

.wrapper{
width: 140px;
height: 110px;
line-height: 100px;
text-align: center;
background:red;
border:0;    

}

Answer 3

添加padding-bottom:5px; 到.wrapper css类

这是小提琴

即。

.wrapper{
  width: 140px;
  height: 110px;
  line-height: 110px;
  text-align: center;
  background:red;
  padding-bottom:5px;
}