Верхняя и нижняя панель навигационной панели через CSS

Question

Я пытаюсь увеличить верхнее и нижнее дополнение в следующем, но не могу заставить его работать. То есть обратите внимание на верхний и нижний код прокладки в ul.navbar li a. Это не имеет никакого эффекта. Какая альтернатива? Пожалуйста, порекомендуйте.

ul.navbar { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #ff9933; 
 
    font-size: 90%; 
 
    text-align: center; 
 
    } 
 

 
    ul.navbar li { 
 
     margin: auto; 
 
     display: inline; 
 
     border-right: 1px solid #ffb366; 
 
    } 
 

 
    ul.navbar li:first-child { 
 
     border-left: 1px solid #ffb366; 
 
    } 
 

 
    ul.navbar li a { 
 
     display: inline; 
 
     color: white; 
 
     text-align: center; 
 
     padding-left: 10px; 
 
     padding-right: 10px; 
 
     padding-top: 30px; 
 
     padding-bottom: 30px; 
 
     text-decoration: none; 
 
    } 
 

 
    ul.navbar li a:hover { 
 
     background-color: #e67300; 
 
    }

<ul class="navbar"> 
 
<li><a href="/">Home</a></li><li><a href="#">Photos</a></li><li><a href="#">Videos</a></li><li><a href="#">Logout</a></li> 
 
</ul>

Я не хочу мешать расположение панели навигации в любом случае - следовательно, не может включать в себя верхнюю и нижнюю обивка вариант в <ul> - что портит внешний вид и парения и то и другое.

Answer 1

inline элементов не имеют верхние и нижние отступов. Если вы хотите, чтобы эти дополнения вы должны использовать block или inline-block элементы:

ul.navbar { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    overflow: hidden; 
 
    background-color: #ff9933; 
 
    font-size: 90%; 
 
    text-align: center; 
 
} 
 

 
ul.navbar li { 
 
    margin: auto; 
 
    display: inline-block; 
 
    border-right: 1px solid #ffb366; 
 
} 
 

 
ul.navbar li:first-child { 
 
    border-left: 1px solid #ffb366; 
 
} 
 

 
ul.navbar li a { 
 
    display: inline-block; 
 
    color: white; 
 
    text-align: center; 
 
    padding-left: 10px; 
 
    padding-right: 10px; 
 
    padding-top: 30px; 
 
    padding-bottom: 30px; 
 
    text-decoration: none; 
 
} 
 

 
ul.navbar li a:hover { 
 
    background-color: #e67300; 
 
}

<ul class="navbar"> 
 
<li><a href="/">Home</a></li><li><a href="#">Photos</a></li><li><a href="#">Videos</a></li><li><a href="#">Logout</a></li> 
 
</ul>

Answer 2

9.4.2 Inline formatting contexts

В контексте форматирования инлайн, блоки располагаются горизонтально, один за другим, начиная с верхнего края контейнера. Горизонтальные поля, границы и отступы соблюдаются между этими ящиками.

Вы можете установить его встраивать блок, если вам нужно, чтобы применить вертикальные Прокладки и т.д.

ul.navbar li a { 
    display: inline-block; 
}