Rembourrage supérieur bizarre sur les éléments de la liste horizontale

Question

J'ai une liste horizontale sur laquelle j'ai placé des bordures sur les étiquettes li afin de les séparer. Son travail mieux, mais j'ai un peu de rembourrage mystérieux sur le haut de la li qui rend les frontières plus grand que le texte:

http://img641.imageshack.us/img641/3706/picture13y.png

J'ai joué avec le rembourrage et les marges, mais je ne peux pas comprendre ce que provoque cela. Aucune suggestion?

Voici le code html:

<div id="top_center"> 
<ul> 
<li><a href="#">(1 New)</a></li> 
<li><a href="#">Verified Account</a></li> 
<li><a href="#">Prefrences</a></li> 
</ul>   
</div> 

Css:

/* -------------------------------------------------------------- 

    typography.css 
    * Sets up some sensible default typography. 
    * Based on the typography.css portion of Blueprint CSS @ http://blueprintcss.org/ 

-------------------------------------------------------------- */ 

/* Default font settings. 
    The font-size percentage is of 16px. (1 * 16px ~ 16px) */ 
body { 
    padding: 0px; 
    margin: 0px; 
    font-size: 100%; 
    color: #313131; 
    background: #fff; 
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; 
} 


/* Headings 
-------------------------------------------------------------- */ 

h1,h2,h3,h4,h5,h6 { font-weight: normal; color: #313131; } 

h1 { text-transform: none; text-decoration: none; font-style: normal; font-weight: normal; letter-spacing: -0.01em; font-size: 30px; font-family: Georgia, "Times New Roman", Times, serif;line-height: 1; margin-bottom: 0.5em; } 
h2 { margin-bottom: 0.75em; text-decoration: none; font-size: 1.13em; } 
h3 { font-size: .88em; line-height: 1; margin-bottom: 1em; color: #767676; } 
h4 { font-size: .88em; font-family: Georgia, "Times New Roman", Times, serif; line-height: 1.25; margin-bottom: 1.25em; } 
h5 { font-size: .75em; margin-bottom: 1.5em; } 
h6 { font-size: .75em; font-weight: bold; } 

h1 img, h2 img, h3 img, 
h4 img, h5 img, h6 img { 
    margin: 0; 
} 


/* Text elements 
-------------------------------------------------------------- */ 

p   { margin: 0 0 1.5em; } 
p img.left { float: left; margin: 1.5em 1.5em 1.5em 0; padding: 0; } 
p img.right { float: right; margin: 1.5em 0 1.5em 1.5em; } 

a:focus, 
a:hover  { color: #94c909; } 
a   { color: #7aa807; text-decoration: underline; } 
h5 a, #top_center li a {text-decoration: none; font-size: .75em; padding-top: 0px;} 

blockquote { margin: 1.5em; color: #666; font-style: italic; } 
strong  { font-weight: bold; } 
em,dfn  { font-style: italic; } 
dfn   { font-weight: bold; } 
sup, sub { line-height: 0; } 

abbr, 
acronym  { border-bottom: 1px dotted #666; } 
address  { margin: 0 0 1.5em; font-style: italic; } 
del   { color:#666; } 

pre     { margin: 1.5em 0; white-space: pre; } 
pre,code,tt { font: 1em 'andale mono', 'lucida console', monospace; line-height: 1.5; } 


/* Lists 
-------------------------------------------------------------- */ 

li ul, 
li ol  { padding-top: 0px; padding-left: 0; margin-left: 0; margin-bottom: 0; margin-right: 1.5em; margin-top: 0; } 
ul, ol  { padding-left: 0; margin-left: 0px; margin-bottom: 1.5em; margin-right: 1.5em; margin-top: 0; } 

ul   { list-style-type: none; } 
ol   { list-style-type: decimal; } 

dl   { margin: 0 0 1.5em 0; } 
dl dt  { font-weight: bold; } 
dd   { margin-left: 1.5em;} 


/* Tables 
-------------------------------------------------------------- */ 

table  { margin-bottom: 1.4em; width:100%; } 
th   { font-weight: bold; } 
thead th  { background: #c3d9ff; } 
th,td,caption { padding: 4px 10px 4px 5px; } 
tr.even td { background: #e5ecf9; } 
tfoot  { font-style: italic; } 
caption  { background: #eee; } 


/* Misc classes 
-------------------------------------------------------------- */ 

.small  { font-size: .8em; margin-bottom: 1.875em; line-height: 1.875em; } 
.large  { font-size: 1.2em; line-height: 2.5em; margin-bottom: 1.25em; } 
.hide  { display: none; } 

.quiet  { color: #666; } 
.loud  { color: #000; } 
.highlight { background:#ff0; } 
.added  { background:#060; color: #fff; } 
.removed { background:#900; color: #fff; } 

.first  { margin-left:0; padding-left:0; } 
.last  { margin-right:0; padding-right:0; } 
.top  { margin-top:0; padding-top:0; } 
.bottom  { margin-bottom:0; padding-bottom:0; } 



#top  { height: 53px; width: 100%; background-repeat: repeat-x; background-image: url(img/top_bg.jpg); } 
#top_center  { height: 53px; margin: 0 auto; width: 950px; } 
#top_center ul {float: right; margin-top: 10px; padding-top: 0px;} 
#top_center li { display: inline; padding-left: 7px; padding-right: 7px; padding-top: 0px; border-left-color: #b3b3b3; border-left-width: 1px; border-left-style: solid;} 
#top_center li:first-child { border: none;} 
#top_center li img { margin-right: 7px; } 

Answer 1

Il se pourrait que vous diminuer la taille du texte des liens.
Mise à jour: Vous réduisez la taille de la police ici:

h5 a, #top_center li a {text-decoration: none; font-size: .75em; padding-top: 0px;} 

Ensuite, le texte est aligné au fond de la boîte. Pour les centrer verticalement, vous pouvez le faire:

#top_center a { 
    vertical-align: middle; 
    } 

Mise à jour 2: Ok avec toute votre CSS, il ne correspond pas correctement en quelque sorte. Mais cela fonctionne pour moi:

#top_center a { 
    display: table-cell; 
    vertical-align: middle; 
    } 

Référence: vertical-align