C H A P T E R 11
Spacing Content
This chapter discusses design patterns that put horizontal and vertical space around inline elements,
which may contain text, images, objects, controls, and so on. This chapter contains the following design
patterns:
- Spacing shows how to space text and content. It simply groups together the many
properties built into CSS that put space around and between blocks, text, and
content. - Blocked shows how to render an inline element as a block element. This is a very
important design pattern that is often combined with other patterns. - Nowrap shows how to prevent the browser from wrapping text across lines.
- Preserved shows how to render whitespace in a document instead of collapsing it.
- Code shows how to mark up computer code, render it inline, display it as a block,
preserve whitespace, and prevent it from being wrapped across lines. - Padded Content shows how to put space around inline content to emphasize it.
- Inline Spacer shows how to insert a horizontal spacer into a line to put a precise
amount of distance between content. - Inline Decoration shows how to insert a decoration into a line. A decoration is
style—not content. It lets you insert a colored background, a textured background,
or a background image into the flow. You can put borders around it. You can use it
to push content apart, to overlap prior content, and to underlap following content. - Line Break shows how to insert four different types of line breaks into your
document that can add extra space between lines or shrink the distance between
lines. - Inline Horizontal Rule shows how to insert a horizontal rule using an inline
element. You can style the horizontal rule with images, borders, margins, and so
on. This allows you to put extra space between lines, to overlap prior lines, and to
underlap following lines. An inline horizontal rule is particularly useful because
you can use an inline element anywhere. HTML’s horizontal rule is a block
element and has limited styling options.