Setting the line-height Using Percentage

It is worth setting line-height in the body selector, as all elements can benefit from inheriting
this value. Headings that wrap to two or more lines, lists, block quotes, and so on can all use
some space for clarity, but it’s the paragraphs where the increased legibility will be most
noticeable. The rule is simple:
line-height:150%;
In this example, the spacing between the lines of text will be the given percentage of the
current font-size. So, a line-height of 100% will make no difference, whereas a line-height of
150% will create a space half the size of the font. A line-height of 200% will create a space equal
to the size of the font, and so on. Here, the line-height declaration is added to the existing
body selector:
/* Specify blanket rules for all elements */
body {
margin: 10px;
border: 1px solid #000;
padding:10px;
font: 12px Verdana, Arial, Sans-serif;
line-height:200%;
}

The browser window on the right clearly shows that a line-height of 200% creates spacing
equal in height to the size of the text characters. This is great for the example, but in the real
world, a value of 150% or 160% would probably be more appropriate.

Other line-height Values
As well as the very flexible method of setting line-height using percentage, some other values
can be used.

Normal
Sets what the experts call a “reasonable distance between lines.” In actuality, this setting is
exactly the same as specifying no line-height at all, and it is only useful if you wish to override
inherited line-height for a particular element.
line-height:normal;

Number
Sets a number that will be multiplied with the current font-size to set the distance between
the lines. For example, if the font-size is 12px, then specifying a line-height of 2 will result in
a space of 24 pixels between lines of text.
line-height:2;

Length
Sets a fixed distance between the lines, which is great for precision, but it is important to
remember that when text is resized, the line spaces will not increase or decrease at the same
ratio as the text.
line-height:8px;
To ensure appropriate scaling when text is resized, use a flexible length measurement such as
ems or percentage.