图片的高度是40px,然后在<a>标签下包裹一个<img>标签,为什么<a>标签的高度比<img>标签的高度还要小， <a>标签的高度才是21px? 先看代码: 或者在JSBIN中查看运行效果:https://jsbin.com/fokuyamijo/edit?html,css,output <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <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> 运行效果: <img>标签的高度: <a>标签的高度:

采纳的答案其实不太准确。 a标签是行内元素，理论上是不能拿来做包裹其他元素的容器这个说法是没有根据的。行内级别元素嵌套行内级别元素是允许且建议的，见 MDN 和 WHATWG 。要理解为什么会出现两个高度需要理解 IFC 的概念。 <a> 在这里是属于行内级别的非替换元素，它是以透明的方式参与 <body> 宣布的 IFC 。其内部的 <img> 在这里是属于行内级别的替换元素，以不透明的方式穿过透明的 <a> 与之处于同一个 IFC 。行内级别的非替换元素计算高度只跟字体、margin、padding 和 border 有关。因为 <a> 不为空，这个最小高度由一个叫 strut 的假想盒子决定。那么最后两个高度怎么排的？行内盒子（inline box）在 IFC 中横向排成一行一行的行盒子（line box），所以这里整体的高度计算就是行高计算。过于简单地总结就是将盒子一个个排上取最高和最低的位置。你可以想象 <img> 将 <a> 切开了。如果 <img> 周围还有其它行内元素，它们也会按各自的盒子计算高度。