CSS Text Spacing
CSS has several properties for controlling the spacing of text.
In this chapter you will learn about: text-indent, letter-spacing, line-height, word-spacing, and white-space.
CSS Text Indentation
The text-indent property sets the indentation of the first line in a block of text.
Tip: Negative values are allowed. A negative value indents the first line to the left.
Example
The first line of the paragraph is indented by 50px.
<style> block, indent the first line of a <p> by 50px. Add a paragraph with a few sentences.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
text-indent: 50px;
}
</style>
</head>
<body>
<p>The first line of this paragraph is indented by 50px. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</body>
</html>
CSS Letter Spacing
The letter-spacing property sets the space between the characters in a text.
Tip: Negative values are allowed.
Example
One heading has wider letter spacing and the other has tighter spacing.
<style> block, give the <h1> 5px letter-spacing and the <h2> -2px letter-spacing. Add a heading of each level.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
letter-spacing: 5px;
}
h2 {
letter-spacing: -2px;
}
</style>
</head>
<body>
<h1>Wider letter spacing</h1>
<h2>Tighter letter spacing</h2>
</body>
</html>
CSS Line Height
The line-height property sets the space between lines.
Note: Negative values are not allowed.
Example
One paragraph has a small line height and the other a large one.
<style> block, make a paragraph class with line-height 0.8 (tight) and one with line-height 1.8 (loose). Give each paragraph several lines of text so the spacing difference is visible.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.small {
line-height: 0.8;
}
p.big {
line-height: 1.8;
}
</style>
</head>
<body>
<p class="small">This paragraph has a small line height.<br>The lines are close together.<br>Lorem ipsum dolor sit amet.</p>
<p class="big">This paragraph has a big line height.<br>The lines are far apart.<br>Lorem ipsum dolor sit amet.</p>
</body>
</html>
CSS Word Spacing
The word-spacing property sets the space between the words in a text.
Tip: Negative values are allowed.
Example
One paragraph has wider word spacing and the other has tighter spacing.
<style> block, make a paragraph class with word-spacing 10px (wider) and one with word-spacing -2px (tighter). Add a paragraph of text for each.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p.one {
word-spacing: 10px;
}
p.two {
word-spacing: -2px;
}
</style>
</head>
<body>
<p class="one">This paragraph has wider spacing between words.</p>
<p class="two">This paragraph has tighter spacing between words.</p>
</body>
</html>
CSS White Space
The white-space property sets how the white space inside an element is handled. It can take these values: normal, nowrap, pre, pre-line, and pre-wrap.
Example
With nowrap, the text stays on one line instead of wrapping.
<style> block, set a <p> to white-space: nowrap so the text stays on one line instead of wrapping. Add a long paragraph of text.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
white-space: nowrap;
}
</style>
</head>
<body>
<p>This text will not wrap to a new line. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
</body>
</html>
The CSS Text Spacing Properties
A summary of the spacing properties:
letter-spacing— sets the space between characters.line-height— sets the line height.text-indent— sets the indentation of the first line.white-space— sets how white space inside an element is handled.word-spacing— sets the space between words.