为什么li元素高度会因为line-height属性而受到影响？

Question

我知道 li 元素的高度会受到 line-height 值的影响。因此，如果 li 的儿子的高度为 20px，则 li 的高度将相同，乘以行高值。但对我来说，它变得无用且烦人，因为没有必要这样做，有时它会使 li 的内容看起来不居中。

我的意思是，行高属性是一个非常重要且有用的资源，但是为什么它甚至在没有文本的情况下必须影响元素呢？ （例如：一个 nav 包含一个 ul，里面有几个 li，里面有这个锚标记元素）

可能不是对疑问的最好解释，但我希望你理解我的困惑。

HTML 中的代码示例：

<ul class="navbar-links">
  <li class="li-link"><a href="" class="nav-link">About</a></li>
  <li class="li-link"><a href="" class="nav-link">Careers</a></li>
  <li class="li-link"><a href="" class="nav-link">Events</a></li>
  <li class="li-link"><a href="" class="nav-link">Products</a></li>
  <li class="li-link"><a href="" class="nav-link">Support</a></li>
</ul>

Answer 1

我认为你想说的是，如果 li 中没有文本，那么它不应该应用 line-height 属性。

这是因为 bootstrap 有定义了 line-height 属性的类。 如果您不希望 li 元素使用行高，那么您可以使用另一个类名称。

我希望这有一定道理。

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />

<ul class="navbar-links">
  <li class="li-link"><a href="" class="nav-link lh-1">About</a></li>
  <li class="li-link"><a href="" class="nav-link lh-1">Careers</a></li>
  <li class="li-link"><a href="" class="nav-link lh-1">Events</a></li>
  <li class="li-link"><a href="" class="nav-link lh-1">Products</a></li>
  <li class="li-link"><a href="" class="nav-link lh-1">Support</a></li>
</ul>