CSS text line-height

Please Share On:

Definition:

CSS text line-height specifies the height of the text. It is used to set the distance between vertical lines of text.

The text line-height property value can be normal, number, length, percentage, initial, and inherit.

Scroll down to understand the text line-height property value in detail. Each property value is defined with an example and displayed in the output result for a better understanding of using each property value of text line-height.

Property Values:

Property Value	Description
normal	This is a default text line-height.
number	Set a fixed line-height in px, em, in, etc
length	Set a fixed line-height in px, em, in etc
percentage (%)	Set the line-height in percentage (%)
Initial	Sets this property to default value.
Inherit	Inherit this property from its parent element.

Syntax:

line-height: normal | number | length | percentage | Initial | Inherit

1. text-height: normal;

Definition:

This is a default text line-height in which property value is normal. See the output below using text-height: normal.

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
.line-height{
  border: 3px solid black;
  line-height: normal;
  background-color: pink;
}
</style>
</head>
      
<body>
<div class="line-height">In this paragraph, We are using text line-height is normal, which is default value of text line-height.<br/>
line-height: normal;</div> 
    
</body>
</html>

Output:

2. text-height: number;

Definition:

Set the line-height into a number. This property makes a space 2.5 times than default height. For example: line-height: 2.5;

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
.line-height{
  border: 3px solid black;
  line-height: 2.5;
  background-color: pink;
}
</style>
</head>
      
<body>
<div class="line-height">In this paragraph, We are using text line-height is 2.5 times apart than the default value.<br/>
line-height: 2.5;</div> 
    
</body>
</html>

Output:

3. text-height: length;

Definition:

Set a fixed line-height in px, em, in, etc. Here, the length value helps to set a fixed line-height in px, em, in, and so on.

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
.line-height-px{
  border: 3px solid black;
  line-height: 20px;
  background-color: pink;
}
.line-height-em{
  border: 3px solid black;
  line-height: 2em;
  background-color: pink;
}
.line-height-in{
  border: 3px solid black;
  line-height: 1in;
  background-color: pink;
}
</style>
</head>
      
<body>
<div class="line-height-px">In this paragraph,</br> We are using text line-height is 20px.</div></br>
<div class="line-height-em">In this paragraph,</br> We are using text line-height is 2em. </div></br>
<div class="line-height-in">In this paragraph,</br> We are using text line-height is 1in. </div>
    
</body>
</html>

Output:

4. text-height: percentage;

Definition:

Set the line-height in percentage (%). Here, we are going to set the text-height property value in percentage. Let’s see the output of text-height using percentage.

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
.line-height{
  border: 3px solid black;
  line-height: 250%;
  background-color: pink;
}
</style>
</head>
      
<body>
<div class="line-height">In this paragraph, We are using text line-height is 250%.<br/>
line-height: 250%;</div>  
</body>
</html>

Output:

5. text-height: initial;

Definition:

Sets this property to the default value. Here, whatever the property value is defined earlier use the same property value now with text-height: initial.

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
.line-height{
  border: 3px solid black;
  line-height: initial;
  background-color: pink;
}
</style>
</head>
      
<body>
<div class="line-height">In this paragraph, We are using text line-height is initial.<br/>
line-height: initial;</div>  
</body>
</html>

Output:

6. text-height: inherit;

Definition:

Inherit this property from its parent element.

Source Code:

<!DOCTYPE html>
<html>
<head>
<style>
.line-height{
  border: 3px solid black;
  line-height: inherit;
  background-color: pink;
}
</style>
</head>
      
<body>
<div class="line-height">In this paragraph, We are using text line-height is inherit.<br/>
line-height: inherit;</div>  
</body>
</html>

Output:

You may be interested in the following topics:

Post Views: 342

CSS text line-height

Definition:

Property Values:

Syntax:

1. text-height: normal;

2. text-height: number;

3. text-height: length;

4. text-height: percentage;

5. text-height: initial;

6. text-height: inherit;

Leave a Reply Cancel reply

Copyright @2023. All Right Reserved.