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

今天做项目的时候，发现在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比较好

转载于:https://www.cnblogs.com/waisonlong/p/4766709.html