原因：
例如： <a href="#"><img src="images/xxx.jpg" alt="pic"></a>
这里的a标签不能包裹住img标签，因为a标签是行级元素，默认display:inline;，无法包含img标签
那么是不是将a标签改为块级元素或者行块级元素就行了呢？
答案是：不行，此时a标签虽然已经将img标签包含在内了，但是行高还是会高出img一些。
这是因为img标签在a标签中垂直对齐方式默认值为vertical-align:baseline，所以img垂直对齐时是按照a的基线对齐而不是底线，此时a就被撑高了。
那么产生问题的关键其实就是： img的垂直对齐方式默认是baseline
解决方案：
- 方案一：消除掉a的高度，也就是给a设置line-height:0或font-size:0;
- 方案二：给img设置vertical-align:top，让其与a的顶部对齐，但如果a标签中同时有文字的话，会改变文字的位置（移到顶部）
- 方案三：给img设置vertical-align:bottom,让其跟a的底部对齐
- 方案四：给img设置display:block，让它和a不在一个布局上下文中，就不存在对齐问题了
