转自：http://www.zhangxinxu.com/wordpress/2015/08/css-deep-understand-vertical-align-and-line-height/

这是 line-height 和 vertical-align 造成的，被称为幽灵空白节点，解决方案有以下几种：

• 让 vertical-align 失效

  • img { display: block; }

• vertical-align 默认为 baseline，更改为其他即可

  • img { vertical-align:middle; }

• 直接修改 line-height 值

  • a { line-height: 5px; }

• 修改 font-size

  • a { font-size: 0; }

a标签加个样式 font-size=0px

给你个方案 ，img{vertical-align:bottom},原因是这样的，图片是默认 靠 基线对其的，其实整个高度你不能理解为是靠 img的高度撑起来的，你应该理解为是靠 line-hieght撑起来的。具体内容看上楼~ 没事多看点大牛的博客！不采纳麻烦也点个赞呀~

1. a元素是一个行内元素

2. img是一个行内替换元素

3. img元素的高度会影响其所在行内元素的的行高

4. 行内元素在垂直方向上默认以baseline的方式的对齐。如果行内元素没有baseline，例如img元素，那么这个元素的底端就可父元素的baseline对齐
   5.a元素直接放入一个img元素，看起来没有文本，实际上浏览器在渲染的时候，会认为a元素放了一个空白的字符而构成一个对齐baseline

Img 默认是基线对齐，底部会有0.25em的高度多出来。可以设置img 为块级元素，也可以设置对齐方式为bottom 解决这个问题