Compact form for font interferes with vertical-alignment

Question

I have this code:

li
{
   width: 200px; height: 22px; overflow: hidden;
   float: left;

   line-height: 22px; letter-spacing: -1px;
   font-weight: 400; font-size: 14px; font-family: "Helvetica Neue";
   text-transform: uppercase;
}

I noticed that if I write all the font properties separated, then I'll have my text in the li box vertical-aligned middle.

font: 400 14px "Helvetica Neue";

Else, if I use the compact form, the text is vertical-aligned top.

I'd like to understand why this happens.

Thank you all in advance.

Answer 1

DEMO

CSS shorthand peoperties described as

selector {  
    font: font-style font-variant font-weight font-size/line-height font-family;  
} 

1) In your case: font: 400 14px "Helvetica Neue";
here you not defining any line height hence its taking default line height and Text seems to be vertically aligned top

2) if you use font: 400 14px/22px "Helvetica Neue";
here you are defining line height - 22px and this will be vertically middle aligned

Sidenote

vertical align middle works because height of LI = line height

Article URL