为什么a标签中使用img后的高度多了几个像素？(转)

这是一个很多前端初学者遇到的问题！

1、首先，<a>标签是inline的，框模型是：行内框。行内框没有包含图片的表现，<img>的标签就好像放在一条公路上一样。所以要使img能像放进一个盒子一样，就应该使用块级框：比如：

display:block;
/*或者*/
display:inline-block;

关于框模型！推荐你去看看css的官方http://www.w3.org/TR/CSS2/或者网上很多文章都有！http://www.tedlife.com/kuang_mo_xing_zhong_lei_fan_wei_he_shu_xing_yi.html 
2、<img>标签为什么会有底下的空白呢？这你要理解所谓的“基线(baseline)”。这是一个英文排版概念。我这里还是引用下知乎人的链接吧！http://www.zhihu.com/question/21558138 讲得很周到！ 

3、总结这个问题的几种解法：
[a]处理基线

a{display:block;}
img{vertical-align: bottom;}

[b]强行去掉<a>标签的行高

a{display:block;line-height:0px;}

[c]没有设置行高的时候可以去掉字体大小；

   
   
   
   

    
    
    全选<button href="javascript:void(0);" _xhe_href="javascript:void(0);" class="copyCode btn btn-xs" data-clipboard-text="" a{display:block;font-size:0px;}"="" data-toggle="tooltip" data-placement="top" title="" style="color: rgb(255, 255, 255); font-style: inherit; font-variant: inherit; font-stretch: inherit; font-size: 12px; line-height: 1.5; font-family: inherit; margin: 0px 0px 0px 5px; overflow: visible; cursor: pointer; vertical-align: middle; border: 1px solid transparent; white-space: nowrap; padding-right: 5px; padding-left: 5px; border-radius: 3px; -webkit-user-select: none; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; background-image: none; background-color: rgba(0, 0, 0, 0.74902);">复制
    放进笔记
   
   
   
   
a{display:block;font-size:0px;}

a元素下有一个匿名文本，这个文本外有一个匿名行级盒子，它有的默认vertical-align是baseline的，而且往往因为上文line-height的影响，使它有个line-height，从而使其有了高度，因为baseline对齐的原因，这个匿名盒子就会下沉，往下撑开一些距离，所以把a撑高了。 解决办法一是消除掉匿名盒子的高度，也就是给a设置line-height:0或font-size:0; 解决办法二是给两者vertical-align:top，让其top对齐，而不是baseline对齐 解决办法三是给img以display:block，让它和匿名行级盒子不在一个布局上下文中，也就不存在行级盒的对齐问题 其他解决办法也有，但这些都是从根本上解决问题