html - 删除 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中有隐藏文本（即空格/换行符）。

尝试font-size:0为.wrapperdiv 添加。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 类

这是小提琴

IE。

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