<a>标签中包裹<img>标签，为什么<a>标签中显示的高度与<img>标签的高度相差那么大?(如图)
先看代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
*{margin:0 ; padding:0;}
</style>
</head>
<body>
<a href="#">
<img src="http://file.baixing.net/201709/cdfc1b368dfeb5198a5bf25f9ab30e91.png" alt="">
</a>
</body>
</html>
或者也可以在JSBIN中看到运行结果:https://jsbin.com/kihukazuve/edit?html,output
<img>标签的高度
<a>标签的高度
a是inline元素，本身就没有高度，你看控制台右边方框中的宽高都是auto。也就是官方标准没有规定。
对于官方标准没有规定的地方，呵呵，那就是各个浏览器自己自由发挥了。
谷歌或ie8+浏览器中是只有文本字体的高度。ie7-浏览器中是a元素中所有内容的高度。
要谷歌浏览器的a元素呈现所有内容的高度。要设置 a{display: inline-block;}
a标签属于行内元素，本事是没有高度的
正常的话应该是标签还会高过标签的,是不是你CSS中有定义到
的display:block使之不在同一布局中导致高度有差异
解决方法：
对a标签样式加display:block;或者display:inline-block;加后实现成块状属性
还有就是img样式单独style="height:40px"
a标签属于行内元素，img标签属于块级元素。a标签设置display: inline-block;或者display: block;属性后变成块级元素即可设置宽高