How to Set Text Spacing and Placement in CSS

See CSS: Tips and Tricks for similar articles.

Text spacing and placement in CSS is controlled using the letter-spacing, word-spacing, line-height, and text-indent properties. Learn how to set text spacing and placement in the following steps.

The letter-spacing property is used to specify the amount of space between letters. The amount indicated is in addition to the default spacing. The amount is specified in units. For example:
```
<div style="letter-spacing: 1em;">It's a wide wide word!</div>
```
The word-spacing property is used to specify the amount of space between words. The amount indicated is in addition to the default spacing. The amount is specified in units. For example:
```
<div style="word-spacing: 1em;">It's a wide wide sentence!</div>
```
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.
```
<div style="line-height: 1.5;">
```
The text-indent property is used to indent (or outdent) the first line of a block of text. The value can be specified in number of units or in percentage of the width of the containing block.
```
<div style="text-indent: 50px;">
```

The following code sample shows all of these properties in use:

<!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>
<h2>Text-Indent</h2>
<div style="text-indent: 50px;">
	text-indent:50px - text-indent only applies to the first line of text.<br>
	The next lines will not be indented.
</div>
<div style="text-indent: 10%;">
	text-indent:10% - text-indent only applies to the first line of text.<br>
	The next lines will not be indented.
</div>
</div>
</body>
</html>

The above code will render the following: Spacing and Placement

How to Set Text Spacing and Placement in CSS

Related Articles