當顯示設置為嵌入式時，頁邊距不起作用

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以垂直（上，下）提供邊距或填充。

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>

試試這個對我有用的。 使用float屬性

Answer 3

您只需要使align-items: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>