Line-height

Contact Us or call 1-877-932-8228
Line-height

Line-height

The line-height property is used to specify the amount of vertical space between lines of text. The line-height can be specified in number of units, percentage, or with a multiplier.

The following code sample shows the effects of letter-spacing, word-spacing, and line-height:

Code Sample:

CssText/Demos/SpacingAndLineHeight.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Spacing and Line Height</title>
</head>
<body>
<div style="margin-left: 300px;">
<h1>Spacing and Line Height</h1>

<h2>Letter Spacing</h2>
<div style="letter-spacing: 1em;">letter-spacing: 1em</div>
<div style="letter-spacing: -1em;">letter-spacing: -1em</div>

<h2>Word Spacing</h2>
<div style="word-spacing: 1em;">word-spacing: 1em</div>
<div style="word-spacing: 1em;">It's a wide wide sentence.</div>

<h2>Line Height</h2>
<div style="line-height: 1.5;">
	line-height: 1.5<br>
	line-height: 1.5<br>
	line-height: 1.5
</div>
<div style="line-height: 150%;">
	line-height: 150%<br>
	line-height: 150%<br>
	line-height: 150%
</div>
<div style="line-height: 1.5em;">
	line-height: 1.5em<br>
	line-height: 1.5em<br>
	line-height: 1.5em
</div>
<hr>
See <a href="LineHeight.html">LineHeight.html</a> for another demo of line-height.
</div>
</body>
</html>

The above code will render the following:

Next