Pro HTML5 and CSS3 Design Patterns

CHAPTER 11 ■ SPACING CONTENT

Spacing

Problem You want to control the spacing around content.^

Solution

HTML

CSS

Tag a terminal block element with a class or ID of your choosing.

Apply styles to your chosen class or ID as follows:

Use margin-left to indent the left side of any element.

Use margin-right to indent the right side of any element.

Use margin-top to indent the top of a block element.

Use margin-bottom to indent the bottom of a block element.

Use padding-left to pad the left side of any element.

Use padding-right to pad the right side of any element.

Use padding-top to pad the top of any element.

Use padding-bottom to pad the bottom of any element.

Use letter-spacing to add space between letters.

Use word-spacing to add space between words.

Use line-height to increase the spacing between lines.

Use text-indent to indent the first line of a terminal block element.

Use text-align:justify to justify text, which adds space between words.

Pattern^

HTML

CSS

<TERMINAL-BLOCK class="elegant">text</TERMINAL-BLOCK>

.elegant {

margin-left:±VALUE; margin-right:±VALUE;

margin-top:±VALUE; margin-bottom:±VALUE;

padding-left:±VALUE; padding-right:±VALUE;

padding-top:±VALUE; padding-bottom:±VALUE;

letter-spacing:±VALUE;

word-spacing:±VALUE;

line-height:±VALUE;

text-indent:±VALUE;

text-align:justify; }

Location This pattern works on all elements, with the exception that margin-top, margin-bottom, text-
indent, and text-align work only on block elements. It is most common to apply spacing to
terminal block elements.

Limitations text-indent works only on terminal block elements. It does not work on inline elements. You
can assign text-indent to structural block elements, and it will be inherited by descendant
terminal block elements.

Tips You can use negative values in margin, letter-spacing, and word-spacing to shrink spacing.
You can assign a value smaller than 1em to line-height to shrink spacing between lines. You
can assign an em measurement to text-indent to indent by an approximate number of letters.
Since a letter is typically twice the height of its width, 2em equals four letters.

Related to Code, Inline Spacer; Invisible Text (Chapter 10); Text Indent, Hanging Indent (Chapter 12);
First-Letter Dropcap, Hanging Dropcap (Chapter 18); Hanging Alert (Chapter 20)