Standardhöhe von div ist anders als berechnet Ergebnis

Question

Ich habe eine Webseite, die ein div enthält. Auf diese Webseite können nur Benutzer zugreifen, die sich authentifiziert haben (das div enthält die Schaltflächen account/logout). Wenn der Benutzer nicht authentifiziert wurde, ist es einfach ein grüner Balken mit einer festen Höhe. Die font-size ist 11pt, mit Polsterung von 0.25em oben und unten. Wenn ich jedoch height von div auf 1.5em setze, ist es zu kurz; von genau 0.25em. Wenn ich also height von div auf 1.75em setze, ist es pixelgenau.

Warum muss die Höhe größer sein als erwartet (1em (11pt) + 0,25em oben und unten sollte 1,5em sein)?

Der Code css ich habe, ist

#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; 
} 

und die HTML ist

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

Answer 1

Ihre line-height zwischen zusätzlichen Pixel in erweitert. hinzufügen

line-height: 1em; 

Um Ihren navbar