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
Setting Line Height in CSS
The CSS line-height property is used to control the vertical spacing between lines of text within an element. It defines the minimum height of line boxes and accepts only positive values.
Syntax
selector {
line-height: value;
}
Possible Values
| Value | Description |
|---|---|
normal |
Default value, typically 1.2 times the font size |
number |
A number that multiplies the current font size |
length |
Fixed line height in px, em, rem, etc. |
% |
Percentage of the current font size |
Example 1: Using Percentage Values
This example demonstrates different line heights using percentage and pixel values −
<!DOCTYPE html>
<html>
<head>
<style>
.container {
font-family: Arial, sans-serif;
margin: 20px;
}
.tight-spacing {
line-height: 60%;
background-color: #f0f0f0;
padding: 10px;
margin: 10px 0;
}
.normal-spacing {
line-height: normal;
background-color: #e0e0e0;
padding: 10px;
margin: 10px 0;
}
.loose-spacing {
line-height: 50px;
background-color: #d0d0d0;
padding: 10px;
margin: 10px 0;
}
</style>
</head>
<body>
<div class="container">
<div class="tight-spacing">
This text has tight line spacing (60%). Multiple lines will appear very close together with minimal vertical space between them.
</div>
<div class="normal-spacing">
This text has normal line spacing. This is the default spacing that browsers typically use for readable text content.
</div>
<div class="loose-spacing">
This text has loose line spacing (50px). There is significant vertical space between lines making it very airy.
</div>
</div>
</body>
</html>
Three text blocks appear with different line heights: the first has very tight line spacing, the second has normal spacing, and the third has very loose spacing with significant gaps between lines.
Example 2: Using Numeric Values
This example shows how numeric values work as multipliers of the font size −
<!DOCTYPE html>
<html>
<head>
<style>
.text-block {
width: 300px;
font-size: 16px;
border: 1px solid #ccc;
padding: 15px;
margin: 15px 0;
background-color: #f9f9f9;
}
.compact {
line-height: 1;
}
.comfortable {
line-height: 1.5;
}
.spacious {
line-height: 2;
}
</style>
</head>
<body>
<div class="text-block compact">
<h3>Line Height: 1</h3>
This paragraph demonstrates compact line spacing where the line height equals the font size. Text appears condensed with minimal vertical spacing.
</div>
<div class="text-block comfortable">
<h3>Line Height: 1.5</h3>
This paragraph uses comfortable line spacing that is 1.5 times the font size. This is often considered ideal for readability.
</div>
<div class="text-block spacious">
<h3>Line Height: 2</h3>
This paragraph has very spacious line height that is double the font size, creating significant vertical space between lines.
</div>
</body>
</html>
Three bordered text blocks display with progressively increasing line heights: compact (1x font size), comfortable (1.5x font size), and spacious (2x font size), clearly showing the difference in vertical spacing.
Conclusion
The line-height property is essential for controlling text readability and visual hierarchy. Use numeric values (like 1.5) for responsive designs, as they scale proportionally with font size changes.
Updated on: 2026-03-15T13:53:44+05:30
102 Views
Advertisements