CSS Line Height
BLUF: Styling is what brings the web to life, and mastering CSS Line Height is key to creating beautiful, responsive interfaces. This tutorial breaks down the concepts and syntax you need to succeed with CSS.
Visual Design Hack: CSS Line Height
CSS is all about presentation. Discover how CSS Line Height works to transform plain HTML into a premium user experience in the guide below.
The CSS line height property is used to define the minimal height of line boxes within the element . It sets the differences between two lines of your content.
It specifies the vertical space above and below inline elements, enabling you to adjust the line height independently of the font size.
CSS line-height values
There are certain values for properties that are applied in conjunction with the CSS line-height property.
| value | description |
|---|---|
| normal | This is a default value. it specifies a normal line height. |
| number | It specifies a number that is multiplied with the current font size to set the line height. |
| length | It is used to set the line height in px, pt,cm,etc. |
% |
It specifies the line height in percent of the current font. |
| initial | It sets this property to its default value. |
| inherit | It inherits this property from its parent element. |
CSS line-height example
Example
<!DOCTYPE html>
<html>
<head>
<style>
h3.small {
line-height: 70%;
}
h3.big {
line-height: 200%;
}
</style>
</head>
<body>
<h3>
This is a heading with a standard line-height.<br>
This is a heading with a standard line-height.<br>
The default line height in most browsers is about 110% to 120%.<br>
</h3>
<h3 class="small">
This is a heading with a smaller line-height.<br>
This is a heading with a smaller line-height.<br>
This is a heading with a smaller line-height.<br>
This is a heading with a smaller line-height.<br>
</h3>
<h3 class="big">
This is a heading with a bigger line-height.<br>
This is a heading with a bigger line-height.<br>
This is a heading with a bigger line-height.<br>
This is a heading with a bigger line-height.<br>
</h3>
</body>
</html>
