返回

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

发布时间:2022-09-09 06:44:07 410
# css

我试图让盒子的高度与我的<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>

特别声明:以上内容(图片及文字)均为互联网收集或者用户上传发布,本站仅提供信息存储服务!如有侵权或有涉及法律问题请联系我们。
举报
评论区(0)
按点赞数排序
用户头像