🎯 What is line-height?

The line-height property is used to define the vertical space between lines of text inside a block element.

In other words, it controls how close or how far apart lines of text appear from each other.

This property is very important for:

• Improving readability
• Creating visual balance in paragraphs
• Making text look more spacious or compact in design

p { 
    line-height: 1.5; 
}
                

➡️ In this example, each line has a height equal to 1.5 times the font size.

This adds extra spacing between lines, making the text easier to read.

This is the default value.

The browser automatically calculates an appropriate line height based on the font.

p { 
    line-height: normal; 
}
                

➡️ Usually results in a line height around 1.2 × font size, depending on the font family.

Defines line height as a multiplier of the font size.

This is a relative value, not fixed in pixels.

p { 
    font-size: 16px;
    line-height: 2; 
}
                

➡️ Line height = 16px × 2 = 32px

This creates a more spacious and readable layout.

Sets a fixed line height using units such as:

• px
• em
• rem
• pt

p { 
    line-height: 24px; 
}
                

➡️ Each line will always be 24px tall, regardless of font size.

Defines line height as a percentage of the font size.

p { 
    line-height: 150%; 
}
                

➡️ If font size is 20px:

• Line height = 20 × 1.5 = 30px

Resets the line height to its default value ( normal ).

p { 
    line-height: initial; 
}
                

The element inherits the line-height value from its parent element.

div { 
    line-height: 2;
}

p { 
    line-height: inherit;
}
                

➡️ The <p> element inherits the value 2 from the <div>.