How can I set the padding to extend till the top and bottom edges of the parent container?

Question

How can I set the padding to extend till the top and bottom edges of the parent container ? For example, in this case, how can I set the padding in such a way that the bottom padding exactly ends where the nav bar ends (unlike what is shown, where it exceeds) ? This would ensure that the entire region corresponding to the link is clickable but it does not extend beyond the bottom part of navbar.

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>

Answer 1

There are a lot of ways to do this, but one way is by not setting the padding at all. Something like the following will work:

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

Again, lots of ways to accomplish what you want, but this is just one way.