Latest Post

Line Spacing

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


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

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.


1) cm : The line height can be set in centimeter as 1cm or 2cm etc..

2) px : The line height can be set in pixels as 1px or 10px etc ...
3) pt : The line height can be set in points as 1pt or 10pt etc ...
4) % : 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;">  
  line height - line 1 <br>  
 line height - line 2 <br>  
 </div>   

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

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

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