Spacing Content

Abstract

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.