a嵌套img标签的问题:<img>元素底部为何有空白？

<img>元素底部为何有空白？

现代浏览器中，<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、3、总结这个问题的几种解法：

[a]处理基线

a{display:block;}

img{vertical-align:bottom;}

 

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

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

 

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

a{display:block;font-size:0px;}