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 geeks.<br>
This div has line-height: 150%;
</div>
</body>
</html>
Output:
Supported Browsers: The browser supported by line-height property are listed below:
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: