Line Spacing, Set Line Height Using Style Sheet

Tutorials

Css

Topic

How to set the line height in html using css?
How to have a large space between each lines (line spacing)?

Explanation

Property: Line Height

Usage:
line-height: 1cm;
line-height: 40px;
line-height: 40pt;
line-height: 200%;

Definition:

This will set the spacing between the lines. It is the broadness / thickness of the line. So each line will be set to the corresponding height.
It takes the following values.
a) cm : The line height can be set in centimeter as 1cm or 2cm etc ...
b) px : The line height can be set in pixels as 1px or 10px etc ...
c) pt : The line height can be set in points as 1pt or 10pt etc ...
d) % : The line height can be set in percent as 200% or 500% etc .... If 100% means original size.

Example 1:

<div style="background-color: lime; line-height: 1cm;">
testing line height - line 1 <br>
testing line height - line 2 <br>
</div>

Result:

testing line height - line 1
testing line height - line 2

Example 2:

<div style="background-color: lime; line-height: 80px;">testing line height<br>
testing line height - line 2 <br>
</div>

Result:

testing line height
testing line height - line 2

Example 3:

<div style="background-color: lime; line-height: 20pt;">testing line height<br>
testing line height - line 2 <br>
</div>

Result:

testing line height
testing line height - line 2

Example 4:

<div style="background-color: lime; line-height: 200%;">testing line height<br>
testing line height - line 2 <br>
</div>

Result:

testing line height
testing line height - line 2

CSS Line Spacing