Home >>CSS Tutorial >CSS Line Height

CSS Line Height

CSS Line Height

The CSS line height property is used to set the minimal amount of space used for line boxes, such as in text within the element.

The number of negative values are not allowed. The differences between two lines of your content can be set by using CSS line height.

CSS Line Height Values

There are some CSS line height values:

Value Description
Normal It defines the normal line height. This is default.
Number It specifies to set the line-height of a number that will be multiplied with the current font size.
Length It is used to fixed the line height in px, pt, cm, etc.
% It specifies the line height in percent of the current font size.
Initial It fixed this property to its default value.
Inherit It specifies that inherits this property from its parent element.

Let's take an example of CSS Line Height:

<!DOCTYPE html>  
<html>  
<head>  
<style>  
h4.small {  
    line-height: 75%;  
}  
h4.big {  
    line-height: 250%;  
}  
</style>  
</head>  
<body>  
<h4 class="small">  
h4 heading with a smaller line-height.<br>  
h4 heading with a smaller line-height.<br>  
h4 heading with a smaller line-height.<br>  
h4 heading with a smaller line-height.<br>  
</h4>  
<h4 class="big">  
h4 heading with a bigger line-height.<br>  
h4 heading with a bigger line-height.<br>  
h4 heading with a bigger line-height.<br>  
h4 heading with a bigger line-height.<br>  
</h4>  
</body>  
</html>  
Output:

h4 heading with a smaller line-height.
h4 heading with a smaller line-height.
h4 heading with a smaller line-height.
h4 heading with a smaller line-height.

h4 heading with a bigger line-height.
h4 heading with a bigger line-height.
h4 heading with a bigger line-height.
h4 heading with a bigger line-height.

Let's understand another example of line height: number

<!DOCTYPE html> 
<html> 
    <head> 
        <title>CSS line-height Property</title> 
        <style> 
            .phptpoint { 
              line-height: 2.5; 
              background:#327bc9; 
              color: white; 
            } 
        </style> 
    </head> 
    <body style = "text-align:center;"> 
        <h1 style = "color:#327bc9;"> 
            PHPTPOINT 
        </h1> 
          <h2> 
            CSS line-height Property: number
        </h2> 
          <div class="phptpoint">  
            This div has line-height: 2.5;<br> 
			Welcome to phptpoint
			</div> 
    </body> 
</html> 
Output:

PHPTPOINT

CSS line-height Property: number

This div has line-height: 2.5;
Welcome to phptpoint

Popular Tutorials