2016-04-29 6 views
1

У меня есть веб-страница, содержащая div. Доступ к этой веб-странице может получить только пользователь, прошедший проверку подлинности (div содержит кнопки учетной записи/выхода). Если пользователь не прошел аутентификацию, то это просто зеленая полоса фиксированной высоты. font-size - 11pt, с прокладкой 0.25em сверху и снизу. Однако, когда я устанавливаю height из div в 1.5em, он слишком короткий; точно 0.25em. Поэтому, если я установил height из div в 1.75em, он идеально подходит для пикселя.Высота по умолчанию div отличается от вычисленного результата

Почему высота должна быть больше, чем ожидалось (1em (11pt) + 0.25em сверху и снизу должно быть 1.5em)?

код CSS у меня есть

#navbar 
{ 
    clear:both; 
    overflow:hidden; 
    background-color: #006633; 
    font-size: 11pt; 
    height: 1.75em; 
} 

#navbarItems 
{ 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    float: right; 
} 

.navbarItem 
{ 
    display: block; 
    float: left; 
    padding: 0; 
    margin: 0; 
} 

.navbarItemLink 
{ 
    display:block; 
    color: #ffffff; 
    text-decoration: none; 
    text-align: center; 
    padding: 0.25em; 
    font-size: 11pt; 
} 

и HTML является

<div id="navbar"> 
    <ul id="navbarItems"> 
     <li class="navbarItem"><a href="editAccount.aspx" class="navbarItemLink">ACCOUNT</a></li> 
     <li class="navbarItem"><a href="Logout.aspx" class="navbarItemLink">LOGOUT</a></li> 
    </ul> 
</div> 

ответ

1

Ваша высота линии добавляет дополнительные пиксели между ними. Добавить

line-height: 1em; 

В панели навигации

+0

Да, это был он. Раньше я никогда не использовал линейную высоту. Благодарю. – Zymus

Смежные вопросы