line-height
On block level elements, the line-height CSS property specifies the minimal height of line boxes within the element.
On non-replaced inline elements, line-height specifies the height that is used in the calculation of the line box height.
On replaced inline elements, like buttons or other input element, line-height has no effect.
Examples
/* All rules below have the same resultant line height */
div { line-height: 1.2; font-size: 10pt } /* number */
div { line-height: 1.2em; font-size: 10pt } /* length */
div { line-height: 120%; font-size: 10pt } /* percentage */
div { line-height: 12pt; font-size: 10pt } /* length */
div { font: 10pt/1.2 Georgia,"Bitstream Charter",serif }
Example
<!DOCTYPE html>
<html>
<head>
<style>
.green {
font-size: 15px;
line-height: 1.1;
border: solid limegreen;
} .red {
font-size: 15px;
line-height: 3.1em;
border: solid red;
}
</style>
</head>
<body>
<div class=green>
Avoid unexpected results by using unitless
line-height length and percentage line-heights
have poor inheritance behavior ...
</div>
<div class=red>
Avoid unexpected results by using unitless
line-height length and percentage line-heights
have poor inheritance behavior ...
</div>
</body>
</html>
