Line Height

From CSS Discuss

Jump to: navigation, search

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

If you make the value larger than the font size 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 Shorthand Property 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 necessary.

More...


Personal tools