a标签嵌套img标签，结果a标签不能被img标签撑开

在控制台中可以看出img的宽度是22*22,a标签的宽度是22*16。
(1)那么为什么a标签嵌套img标签，结果a标签不能被img标签撑开？？
答案1：img标签放在了a标签(inline模型)内部，由于inline不是用来包含内容的，因此这需要将a标签display改为inline-block或者block，a标签就可以包含img标签了，此时会引起问题（2）；

(2)还有a标签嵌套img标签，a标签比img标签高？?

答案2：
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 }

对齐方式设为底线，而不以基线对齐，也消除了空白

作者：LOVE小狼
链接：http://www.jianshu.com/p/e337d07bc101
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。