图片底部产生空隙问题

原因：简单的说，行内元素默认的垂直对齐（vertical-align）方式为基线对齐（baseline），是以x字母的下方为基准。但是有部分字体超过基线下方，使得元素底部预留空间，造成图片底部有空隙

解决方法

1. 给图片添加 display:block，不受行内基线的影响
2. 更改图片 vertical-align 属性(middle等），让它不以基线对齐
3. 给父元素添加 font-size: 0，去掉字母的因素