Strange CSS behaviour with font shorthand

<div class="timer">00:01:05</div>

The following css generates a 154x30px box:

div.timer
开发者_开发问答{

    font: 700 24px Arial, Helvetica, sans-serif;
}

and this one generates a 154x19px box (on the sam div element).

div.timer
{
    font-weight: 700;
    font-size: 24px;
    font-family: Arial, Helvetica, sans-serif;
}

How can this be possible? I checked the shorthand property and i can't find what I'm doing wrong. I ordered the attributes in the good order, of that I'm preety sure.

When you use a shorthand property, any value you don't specify is reset to the default.

So the first example changes the font-style, font-variant and line-height. The line-height in particular is likely to alter the box size.