The line-height property in CSS is used to specify the height of each line of text within an element. It controls the spacing between lines, helping improve readability and the overall appearance of text content.
- Can be set using length values, percentages, or unitless numbers.
- Increases or decreases spacing between lines for better text formatting.
- Commonly used in paragraphs, articles, and headings to enhance readability and design aesthetics.
Syntax: line-height: normal | number | length | percentage | initial | inherit;Property values
It Defines how much vertical space is used between lines of text, using default, initial, numeric, length-based, or percentage values to control readability and layout.
| Value | Description |
|---|---|
| normal | Represents the default line-height of the element. |
| initial | Sets the line height property to its default value. |
| number | Unitless numbers are multiplied by the element's font size to determine line height. |
| length | Specifies a fixed line height using a length unit (e.g., px, em). |
| percentage | Sets the line height as a percentage of the element's font size. |
Line-Height: Normal; Property
The line-height: normal; property sets the default line height for text, typically ensuring optimal readability and spacing within the element.
Example: We are using the line-height: normal; property.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>CSS line-height Property</title>
<!--Driver Code Ends-->
<style>
.geek {
line-height: normal;
background: green;
color: white;
}
</style>
<!--Driver Code Starts-->
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>
CSS line-height Property
</h2>
<div class="geek">
A computer science portal for geeks.<br>
This div has line-height: normal;
</div>
</body>
</html>
<!--Driver Code Ends-->
Line-Height: Number; Property
The line-height: number; property sets the line height to a unitless number multiplied by the current font size, influencing text spacing and readability effectively.
Example: We use the line-height: number; property.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>CSS line-height Property</title>
<!--Driver Code Ends-->
<style>
.geek {
line-height: 2.5;
background: green;
color: white;
}
</style>
<!--Driver Code Starts-->
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>
CSS line-height Property
</h2>
<div class="geek">
A computer science portal for geeks.<br>
This div has line-height: 2.5;
</div>
</body>
</html>
<!--Driver Code Ends-->
Line-Height: Length; Property
The line-height: length; property sets the line height using a length value. Length units can be absolute (e.g., px) or relative (e.g., em), allowing text spacing to be controlled either independently or relative to the font size.
Example: We are using line-height: length property.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>CSS line-height Property</title>
<!--Driver Code Ends-->
<style>
.geek {
line-height: 2em;
background: green;
color: white;
}
</style>
<!--Driver Code Starts-->
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>
CSS line-height Property
</h2>
<div class="geek">
A computer science portal for geeks.<br>
This div has line-height: 2em;
</div>
</body>
</html>
<!--Driver Code Ends-->
Line-Height: Percentage; Property
The `line-height: percentage;` property sets the line height as a percentage of the current font size, adjusting text spacing proportionally within the element.
Example: We are using line-height: percentage property.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>CSS line-height Property</title>
<!--Driver Code Ends-->
<style>
.geek {
line-height: 150%;
background: green;
color: white;
}
</style>
<!--Driver Code Starts-->
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>
CSS line-height Property
</h2>
<div class="geek">
A computer science portal for geeks.<br>
This div has line-height: 150%;
</div>
</body>
</html>
<!--Driver Code Ends-->