Setting line heights : line height « CSS « HTML / CSS






  1. HTML / CSS
  2. CSS
  3. line height

Setting line heights

   
<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<style type="text/css"> 
p:before { content: attr(style) " "; } 
</style> 
</head> 
<body> 
<p style="line-height: normal;">Lorem ipsum dolor sit amet, ...</p> 
<hr/> 
<p style="line-height: 100%;">Lorem ipsum dolor sit amet, ...</p> 
<hr/> 
<p style="line-height: 1.5em;">Lorem ipsum dolor sit amet, ...</p> 
<hr/> 
<p style="line-height: 10px;">Lorem ipsum dolor sit amet, ...</p> 
</body> 
</html>








Related examples in the same category

1.'line-height' Example
2.line-height: 1.5
3.line-height: 1.4em
4.line-height: 75%
5.line-height: 1.5;
6.line-height: 1.5em;
7.line-height: 75%;
8.line height:3em
9.Line-height settings
10.line-height:normal;line-height:18px;line-height:1.5em;line-height:1.9ex;
11.line-height:1.5em;
12.Interlinear space
13.Examples of font-size and line-height
14.Set line height to 1em
15.Set line height to 1.5
16.line-height: 150%; assigns 150% of the font-size to line-height.
17.Padding sets apart text to emphasize it and line-height
18.Proportional line heights
19.Different line height with various measurements