2

I didn't think the order of CSS within a rule set mattered, as long as there weren't implicitly duplicate rules (such as border and border-top).

In fact, many CSS Style Guides recommend an arbitrary order such as "By group" or "Alphabetically."

However, the order of font and line-height within a rule set can make a big difference:

div {border: 1px solid gray; float: left;}
#D1 {font: 20px arial; line-height: 3;}
#D2 {line-height: 3; font: 20px arial;}
<div id="D1">This is a test</div>
<div id="D2">This is a test</div>

A unitless line-height should be a multiplier of the font size.

But why does the font rule have to precede the line-height rule for this to happen?

Rick Hitchcock
  • 35,202
  • 5
  • 48
  • 79
  • 3
    Because `font` is shorthand for multiple properties, which **include** line-height. See [**font @ MDN**](https://developer.mozilla.org/en-US/docs/Web/CSS/font). – Paulie_D Apr 24 '15 at 12:06
  • 2
    This question is kinda sorta the antithesis of [What does this CSS font shorthand syntax mean?](http://stackoverflow.com/questions/4080265/what-does-this-css-font-shorthand-syntax-mean), which features a font shorthand that includes line-height. – BoltClock Apr 24 '15 at 12:12

1 Answers1

6

Despite its name, line-height is actually part of the font shorthand. The shorthand declaration sets line-height to its initial value of normal, which overrides your previous line-height declaration.

To this end, you can incorporate line-height into the shorthand, as shown below with the addition of a #D3 element:

div {border: 1px solid gray; float: left;}
#D1 {font: 20px arial; line-height: 3;}
#D2 {line-height: 3; font: 20px arial;}
#D3 {font: 20px/3 arial;}
<div id="D1">This is a test</div>
<div id="D2">This is a test</div>
<div id="D3">This is a test</div>
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356