造成原因：

    图片的 display 属性默认是 inline ，而这个属性的 vertical-align 的默认值是baseline。

解决办法1：

    将 img 的 display 设置为 block

img{
    display : block ;  
}

解决方法2:

    将 img 的 vertical-align设置为middle

img{
    vertical-align : middle ;  
}

解决方法3:

　 给 img 的父级容器 添加属性 overflow:hidden

.img-parent{
       overflow : hodden ; 
}

补充 : 

定义和用法 : 

vertical-align 属性设置元素的垂直对齐方式。

说明 :

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

css - 去掉图片下的白边