为什么line-height属性会对<li>元素的高度产生影响？

你的疑问核心在于对line-height作用机制的理解，下面拆解原因：

• line-height是可继承属性
  CSS中line-height属于可继承样式，只要父元素（比如页面的body、你的<ul>）设置了line-height值，子元素（比如<li>）会默认继承这个属性。哪怕<li>本身没有直接文本，继承的line-height依然会作用于它内部的内联元素（比如<a>标签）。

• 匿名内联盒子的隐形作用
  当块级元素（比如<li>）内部包含内联元素（比如<a>）时，浏览器会自动在这些内联元素的前后生成匿名内联盒子。这些匿名盒子会继承父元素的line-height值，它们的行高会和内部真实的内联元素一起，撑起块级元素的高度——这就是为什么你看到<li>的高度被line-height影响了。

• 结合你的Bootstrap场景来看
  Bootstrap的默认样式中，会给body等基础元素设置默认的line-height（比如1.5），你的<li>继承了这个值。内部的<a>是内联元素，它的排版高度会受继承来的line-height影响，最终带动<li>呈现出对应的高度，哪怕<li>本身没有直接文本内容。

举个简单的验证示例：

/* 模拟Bootstrap的默认继承逻辑 */
body {
  line-height: 1.5;
}
.li-link {
  border: 1px solid #ccc; /* 给li加边框，方便直观看到高度变化 */
}
.nav-link {
  text-decoration: none;
  color: #333;
}

当你修改body的line-height值时，<li>的高度会随之变化，就能直观验证这个逻辑。

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