line-height Archives - Lena Design

The CSS line-height property defines the height of a line.

Demo:

Syntax:

line-height: normal|number|length;

normal (default) – a normal line-height.

number – a number will be multiplied with the current font size to set the line height.

length – a fixed line height (in px, cm, etc).

Example:

<!DOCTYPE html>
<html>
<head>
<style>

.ex1 {
  line-height: normal;
}
.ex2 {
  line-height: 12px;
}

.ex3 {
  line-height: 0.7cm;
}

.ex4 {
  line-height: 2.5;
}
</style>
</head>
<body>

<h3>line-height: normal;</h3>
<div class="ex1">CSS<br>
line-height</br>
Property</div>

<h3>line-height: 12px;</h3>
<div class="ex2">CSS<br>
line-height</br>
Property</div>

<h3>line-height: 0.7cm;</h3>
<div class="ex3">CSS<br>
line-height</br>
Property</div>

<h3>line-height: 2.5;</h3>
<div class="ex4">CSS<br>
line-height</br>
Property</div>
</body>
</html>

Output:

line-height: normal;

CSS
line-height
Property

line-height: 12px;

CSS
line-height
Property

line-height: 0.7cm;

CSS
line-height
Property

line-height: 2.5;

CSS
line-height
Property

Enjoy coding!