当显示设置为嵌入式时，页边距不起作用

Question

I am working from a tutorial but wanted to try it out myself first. The problem is that while using hover over the link, the background color change touches the topmost of the navbar but doesn't touch the bottom of it.

margin-top doesn't work when the display is set to inline and I've tried padding and similar solutions. Here is my code:

*{
    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;
}

Its html code is:

<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 and margin-bottom doesn't work for inline elements. Try changing the display to inline-block to provide margins or paddings vertically(top, bottom).

Answer 2

<style>
    ul#menu
    {
        margin: 0 0 5px;
        padding: 0;
        text-align: right;
        float: right;
    }

    ul#menu li
    {
        float: left;
        list-style: none;
        padding-left: 15px;
    }
</style>


<nav>
    <h1 class="logo">
        <span >
            <i ></i> Edge</span>Ledger
    </h1>
    <ul id="menu">
        <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>

Try this one it works for me. Use float property

Answer 3

you just have to make align-items:center it will make the things center.

 *{ 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; align-items: center; padding: 1rem; } nav li{ list-style: none; display: inline; padding: 1rem; } nav a{ text-decoration: none; color: #f4f4f4; padding: 1rem; } 

 <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>