<a>标签里面直接嵌套图片，<img>下面出现一小段空白的原因

今天在写页面时，发现在a标签，里面嵌入<img>底部会出现空白的问题！

请看示例代码：

1 <a style="border: 2px dashed blue">
2     <img src="images/module/zright2.jpg" alt="图片">
3 </a>

请看示例效果图：

现在出现了两个问题，首先a标签，没有因为img的大小而被撑大，然后是a的内部下面出现空白。

1、首先，<a>标签是inline的，框模型是：行内框。行内框没有包含图片的表现，<img>的标签就好像放在一条公路上一样。所以要使img能像放进一个盒子一样，就应该使用块级框：比如：
display:block;
/*或者*/
display:inline-block;
关于框模型！推荐你去看看css的官方http://www.w3.org/TR/CSS2/或者网上很多文章都有！

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、没有设置行高的时候可以去掉字体大小
a{display:block;font-size:0px;}

文章乃参考、转载其他博客所得，仅供自己学习作笔记使用！！！

转载于:https://www.cnblogs.com/Y1473/p/10260808.html