Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
CSS line-height property
The CSS line-height property is used to set the height of a line of text. It controls the spacing between lines of text within an element, affecting readability and visual appearance.
Syntax
selector {
line-height: value;
}
Possible Values
| Value | Description |
|---|---|
normal |
Default value, usually around 1.2 times the font size |
number |
A number multiplied by the font size (e.g., 1.5) |
length |
Fixed length in px, em, rem, etc. |
% |
Percentage of the font size |
Example: Setting Line Height
The following example demonstrates different line-height values applied to paragraphs −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
width: 400px;
border: 2px solid green;
padding: 10px;
margin: 10px 0;
font-size: 16px;
}
.normal {
line-height: normal;
}
.large {
line-height: 2;
}
.fixed {
line-height: 30px;
}
</style>
</head>
<body>
<div class="container normal">
This paragraph has normal line height. The spacing between lines is the default browser setting.
</div>
<div class="container large">
This paragraph has line-height: 2, which means each line is twice the font size in height.
</div>
<div class="container fixed">
This paragraph has a fixed line height of 30px regardless of font size changes.
</div>
</body>
</html>
Three green-bordered boxes appear: 1. First box shows normal line spacing 2. Second box shows increased line spacing with more vertical space between lines 3. Third box shows fixed 30px line spacing
Best Practices
Use unitless numbers (like 1.5) for line-height as they scale proportionally with font size changes. A line-height between 1.2 and 1.6 is generally recommended for optimal readability.
Conclusion
The line-height property is essential for controlling text spacing and improving readability. Use relative values for better scalability across different font sizes.
Updated on: 2026-03-15T11:22:08+05:30
134 Views
Advertisements