Basically: line-height sets the height of a line of text.

If you make the value larger than the font-size (FontSize) then it will look like the lines are moving further away. Set it smaller, and the lines will start to overlap.

For a technical definition, read the [W3C on line-height].

An example from the specs:

div { line-height: 1.2;   font-size: 10pt }   /* number */
div { line-height: 1.2em; font-size: 10pt }   /* length */
div { line-height: 120%;  font-size: 10pt }   /* percentage */

Each example will have the same immediate effect, but they differ in inheritance. Both em and % inherit as computed values, while a unitless number inherits directly. Felix has an [example] that shows the significance of the difference.

Setting font-size and line-height at the same time

This can be done using the ShorthandProperty font.

Example:

font: 12px/1.4 sans-serif;

This will set font-size to 12px, line-height to 1.4 and font-family to sans-serif.

font-size always comes first, line-height comes second:

font-size/line-height

NB: The font-family part is neccessary.

[More...]

----

CategoryProperty