How to correctly combine the font and the line-height CSS rules in an HTML-element?

When using the font rule together with the line-height rule, there is something that you have to pay attention to, if you want to be sure that the combination of the two rules works as intended.

To start with, the font property combines the font-family, the font-size, the font-weight and the line-height in one command. But what happens if you do not set the line-height inside the font property but use the line-height rule explicitly?

In order this combination of the two properties to work, you have to make sure that the line-height property comes after the font property. Consider the following example:

1
2
3
4
    #someDiv {
        line-height: 20px;
        font: bold 14px arial;
    }

Can you tell what is the line-height value of the element with id #someDiv? Nope, it is not 20px. Since the line-height is also implicitly declared when we use the font property, the value of the line-height of the element is going to be normal, which means that the order of the css rules plays a role and the last rule wins, when two or more rules are compared with each other.

In order to make the previous example work, you have to change the order of the two CSS rules:

1
2
3
4
    #someDiv {
        font: bold 14px arial;
        line-height: 20px;
    }