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

【问题标题】：How can I set the padding to extend till the top and bottom edges of the parent container?如何将填充设置为延伸到父容器的顶部和底部边缘？
【发布时间】：2021-07-11 16:46:42
【问题描述】：

如何将填充设置为延伸到父容器的顶部和底部边缘？例如，在这个 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>

【问题讨论】：

标签： html css containers padding nav

【解决方案1】：

有很多方法可以做到这一点，但一种方法是根本不设置填充。像下面这样的东西会起作用：

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

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

【讨论】：