Comportement étrange des CSS avec les raccourcis de police

Question

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

Le fichier css suivant génère une boîte de 154x30px :

div.timer
{

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

et celui-ci génère une boîte de 154x19px (sur l'élément div sam).

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

Comment cela peut-il être possible ? J'ai vérifié la propriété shorthand et je ne trouve pas ce que je fais de mal. J'ai ordonné les attributs dans le bon ordre, j'en suis presque sûr.

Answer 1

Lorsque vous utilisez une propriété raccourcie, toute valeur que vous ne spécifiez pas est réinitialisée à la valeur par défaut.

Le premier exemple modifie donc le style de police, la variante de police et la hauteur de ligne. La hauteur de ligne, en particulier, est susceptible de modifier la taille de la boîte.