为何外层<a>标签高度小于内部嵌套的<span>标签？

这种高度差异是由块级元素与行内元素的line-height作用机制不同，以及字体固有字形高度共同导致的：

• 块级元素（<a>）的高度计算逻辑
  你给<a>设置了display:block，此时它的line-height:100%会基于自身font-size计算为18px，块级元素的content box高度会直接等于这个计算后的line-height值，所以元素检查中显示<a>的高度为18px。

• 行内元素（<span>）的高度计算逻辑
  <span>是行内元素，虽然你同样设置了line-height:100%（计算值也是18px），但行内元素的实际高度由字体的固有字形范围决定。绝大多数系统默认字体（比如无衬线字体）的字形垂直空间（ascent+descent）会略大于设置的font-size，浏览器为了完整显示字形，不会按照line-height的值去裁切，因此行内元素的实际高度会超过计算出的line-height，也就是你看到的20px。

额外补充：行内元素的line-height是控制行盒的最小高度，但如果字体本身的高度超过这个值，行盒高度会被字形撑开；而块级元素的高度由自身的line-height直接定义，不会被内部行盒的高度强制撑开（除非设置overflow:hidden这类属性才会裁切超出部分）。

内容的提问来源于stack exchange，提问作者Werner