CSS line-height Property
The CSS line-height property determines the height of each line of text within an element. It can be set as a specific length, percentage of the font size, or unitless number, affecting spacing between lines for improved readability and aesthetics.
Syntax:
line-height: normal|number|length|percentage|initial|inherit;
Property values:
| Value | Description |
|---|---|
| normal | Represents the default line height of the element. |
| initial | Sets the line height property to its default value. |
| number | Unitless number 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. |
Table of Content
- line-height: normal; property
- line-height: number; property
- line-height: length property
- line-height: percentage property
Here we see example of each Property values:
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: In this example, we are using the line-height: normal; property.
<!DOCTYPE html>
<html>
<head>
<title>CSS line-height Property</title>
<style>
.geek {
line-height: normal;
background: green;
color: white;
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
w3wiki
</h1>
<h2>
CSS line-height Property
</h2>
<div class="geek">
A computer science portal for Beginner.<br>
This div has line-height: normal;
</div>
</body>
</html>
Output:
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: In this example, we use the line-height: number; property.
<!DOCTYPE html>
<html>
<head>
<title>CSS line-height Property</title>
<style>
.geek {
line-height: 2.5;
background: green;
color: white;
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
w3wiki
</h1>
<h2>
CSS line-height Property
</h2>
<div class="geek">
A computer science portal for Beginner.<br>
This div has line-height: 2.5;
</div>
</body>
</html>
Output:
line-height: length property
The line-height: length; property sets a specific fixed line height using a length unit (e.g., pixels, em), adjusting text spacing within the element accordingly.
Example: In this example, we are using line-height: length property.
<!DOCTYPE html>
<html>
<head>
<title>CSS line-height Property</title>
<style>
.geek {
line-height: 2em;
background: green;
color: white;
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
w3wiki
</h1>
<h2>
CSS line-height Property
</h2>
<div class="geek">
A computer science portal for Beginner.<br>
This div has line-height: 2em;
</div>
</body>
</html>
Output:
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: In this example, we are using line-height: percentage property.
<!DOCTYPE html>
<html>
<head>
<title>CSS line-height Property</title>
<style>
.geek {
line-height: 150%;
background: green;
color: white;
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
w3wiki
</h1>
<h2>
CSS line-height Property
</h2>
<div class="geek">
A computer science portal for Beginner.<br>
This div has line-height: 150%;
</div>
</body>
</html>
Output:
Supported Browsers: The browser supported by line-height property are listed below:
Contact Us