line-height
Description
This property influences the layout of line boxes. When applied to a block-level element, it defines the minimum distance between baselines within that element, but not the maximum.
| Item | Value |
|---|---|
| Initial value | normal |
| Inherited | Yes. |
| Version | CSS1 |
| JavaScript syntax | object.style.lineHeight="2" |
| Applies to | All elements. |
Syntax and Property Values
line-height: number | length | percentage | normal | inherit
The property values are listed in the following table.
| Value | Description |
|---|---|
| auto | Default value. The browser does the calculation. |
| length | Set value in px, cm, etc. |
| % | Set the value in percent of the containing element |
| normal | A normal line height. Default |
| inherit | Inherit the line-height property from the parent element |
Example
The following code uses different values to set the line height.
p {line-height: 1.5em;}
h2 {line-height: 200%;}
ul {line-height: 1.2;}
pre {line-height: 0.75em;}
<!DOCTYPE HTML>
<html>
<head>
<style>
td {<!--from w ww .ja va2s . c om-->
width: 200px;
font: 12pt arial;
}
td.number {
font-size: 12pt;
line-height: 1.5;
}
</style>
</head>
<body>
<table>
<tr>
<td class="number">The text here uses a number.</td>
</tr>
</table>
</body>
</html>
The code above generates the following result.
