今天做项目的时候，发现在a标签，里面嵌入<img>会出现空白
css 内容：
a{
border:1px solid black;
}
img{
width:200px;
}
html内容：
<a><img src="img/1.jpg"></a>
效果生成图：
现在出现了两个问题，首先a标签，没有因为img的大小而被撑大
然后是a的内部下面出现空白，以前一直知道这种问题的存在，但是没有什么大影响，所以一直没有深究
第一个问题：
没有被撑大的原因是a标签是内联元素，不能设置高度。所以如果想撑大a标签最直接的方法就是设css
a{
display:inline-block;
}
设置后，问题都解决了，连第二问题都解决了。
但是不能这个就认为问题解决了。
究竟是什么原因造成下面留白的问题？
引用网上看到的一段话：
這空隙是個很經典的問題，
原因其實非常的基本，
因為當初設立標準的不是亞洲而是歐洲，
inline 元素為了正確的顯示英文字母像是 y j g 帶有尾巴的
會在底下留空，這要依據 font-size 去決定
如果a內無任何文字，font-size可以設定為 0
这就是为什么出现空白的原因。但是个人还是觉得利用display：inline-block比较好
原文：http://www.cnblogs.com/waisonlong/p/4766709.html