On block level elements, the line-height property specifies the minimum height of line boxes within the element.
CSS property line-height
| CSS version: | CSS 2.1 |
| Value: | normal | number | length | percentage |
| Initial: | normal |
| Applies to: | all elements |
| Inherited: | yes |
line-height values
| Value type | Interpretation | Inheritance |
|---|---|---|
| normal (default) | roughly 1.2 depending upon font-family | - |
| number (preferred) | number * font-size | Value is inherited before computation |
| length (avoid) | 1.2em, etc. | Value is inherited after computation. Can lead to unexpected results |
| length (avoid) | percentage * font-size | Value is inherited after computation. Can lead to unexpected results |
Comment on inheritance
In case font value is in number, the value is inherited as it is and computation applies on child element font-size. For value in length or percentage, it is computed and then inherited. In case child font being very large, this can lead to a situation line-height being less than font.
line-height number value example with inheritance
This is the preferred option and inheritance does not cause unexpected results.
<style type="text/css">
.outer {
width: 100px;
font-size: 14px;
line-height: 1.2;
}
h1 {font-size: 30px;}
</style>
<div class="outer">
<h1>This is in h1</h1>
Hello world - just normal text
</div>line-height length (em) value example with inheritance
When using line-height length (em) value, inheritance can cause expected results.
<style type="text/css">
.outer {
width: 100px;
font-size: 14px;
line-height: 1.2em;
}
h1 {font-size: 30px;}
</style>
<div class="outer">
<h1>This is in h1</h1>
Hello world - just normal text
</div>line-height percentage value example with inheritance
When using line-height percentage value, inheritance can cause expected results.
<style type="text/css">
.outer {
width: 100px;
font-size: 14px;
line-height: 120%;
}
h1 {font-size: 30px;}
</style>
<div class="outer">
<h1>This is in h1</h1>
Hello world - just normal text
</div>
