html - 当显示设置为内联时，margin-top 不起作用

Question

我正在学习教程，但想先自己尝试一下。问题是，在将鼠标悬停在链接上时，背景颜色的变化会触及导航栏的最顶部，但不会触及它的底部。

margin-top 在显示设置为内联时不起作用，我尝试了填充和类似的解决方案。这是我的代码:

*{
    padding: 0;
    margin:0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.logo .text-primary {
    color: #85b84b;
}

a:hover{
    background: #85b84b;
    border-radius: 5px;
}

nav{
    background: #444;
    color: #f4f4f4;
    display: flex;
    justify-content: space-between;
    text-align: center;
    padding: 1rem;
}

nav li{
    list-style: none;
    display: inline;
    padding: 1rem;
}

nav a{
    text-decoration: none;
    color: #f4f4f4;
    padding: 1rem;
}

它的html代码是:

<nav>
  <h1 class="logo">
     <span class="text-primary">
     <i class="fas fa-book-open"></i> Edge</span>Ledger
  </h1>
  <ul>
     <li><a href="#">Home</a></li>
     <li><a href="#">What</a></li>
     <li><a href="#">Who</a></li>
     <li><a href="#">Contact</a></li>                
  </ul>
</nav>

Answer 1

margin-top 和 margin-bottom 不适用于行内元素。尝试将显示更改为 inline-block 以提供垂直(顶部、底部)的边距或填充。