如何设置填充以延伸到父容器的顶部和底部边缘？

问题描述

如何将内边距设置为延伸到父容器的顶部和底部边缘？ 例如，在这个 case 中，我如何设置填充以使底部填充恰好在导航栏结束的位置结束（与显示的不同，它超出的位置）？这将确保与链接对应的整个区域都是可点击的，但不会超出导航栏的底部。

nav {
  background: rgb(255,99,71);
  height: 50px;
}

a {
  padding-bottom: 35px;
  background-color: rgb(0,128,128);
}

<nav>
  <a href="#">Hello</a>
  <a href="#">About</a>
</nav>

解决方法

有很多方法可以做到这一点，但一种方法是根本不设置填充。类似以下内容将起作用：

a {
    display: inline-flex;
    line-height: 50px;
    background-color: rgb(0,128,128);
}

同样，有很多方法可以实现您的愿望，但这只是一种方法。