html-为什么我的填充 + 字体大小不等于容器的高度？

我试图让盒子的高度与我的<nav>. 将导航的高度设为 10rem 并使用 2.25rem 字体，然后为我的填充做了 10-2.25/2，但注意到它溢出了很多。为什么会这样，为什么这个值会使盒子看起来与容器的大小完全一样？

body{
      background-color: hsl(168, 39%, 64%);
      margin:0;
      padding:0;
    }

.ul-nav{
    display:flex;
    flex-direction:row;
    flex-wrap: nowrap;
    justify-content:space-evenly;
    align-content:stretch;
    height: 100%;
    margin: 0;
    list-style: none;
    margin-left: 7.5rem;
}
.li-nav{
    text-align: center;
}
.nav{
    display: flex;
    position: fixed;
    margin:0;
    padding: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 10rem;
    background-color: hsl(178, 40%, 40%);
}
.nav-a{
    text-decoration: none; 
    color: black;
    display:block;
    font: Arial;
    font-size: 2.25rem;
    margin: 0;
    padding: 3.72rem;
}
.nav-a:hover{
    text-decoration: none;
    background-color: hsl(178, 40%, 30%);

}
.nav-a:visited{
    text-decoration: none;
}

我不明白为什么填充不仅仅是（高度字体大小）/ 2。我对 HTML/CSS 很陌生。我大约 2 个月前开始，这是我获得认证后开始的第一个项目，所以请多加解释。

<nav id="nav-bar" class="nav">

  <ul class="ul-nav">

    <li class="li-nav"><a class="nav-a" href="Grace.html">Home</a></li>

    <li class="li-nav"><a class="nav-a" href="about.html">About</a></li>

    <li class="li-nav"><a class="nav-a" href="pricing.html">Pricing</a></li>

    <li class="li-nav"><a class="nav-a" href="reviews.html">Reviews</a></li>

    <li class="li-nav"><a class="nav-a" href="contact.html">Contact</a></li>

  </ul>

</nav>