img标签放在了a标签(inline模型)内部,由于inline不是用来包含内容的,因此这需要将a标签display改为inline-block或者block
但是仅仅改变display并不能解决问题,因为img在a中垂直对齐方式也就是vertical-align默认值为baseline,所以img最垂直对齐时是按照a的基线对齐而不是底线
该问题产生的关键就是垂直对齐方式,基线与底线间存在空白,如何消除空白
解决办法
1.a{ display:inline-block或者block; line-height:0px或者font-size:0; }
注:line-height的值默认是按照font-size的值乘以一定比例计算得来
line-height设置为0时,基线与底线间距离为0,空白消除
2.img{ vertical-align:bottom }
对齐方式设为底线,而不以基线对齐,也消除了空白