Pro HTML5 and CSS3 Design Patterns

CHAPTER 8 ■ POSITIONING: INDENTED, OFFSET, AND ALIGNED

Indented

Problem You want to indent the left and right sides of a static element, or you want to
indent the left, right, top, and bottom sides of a stretched absolute element. You
also want to outdent these elements.

Solution Indenting is a combination of stretching an element to the sides of its container
and then offsetting its sides. Indenting to the inside shrinks the size of an
element. Indenting to the outside (or outdenting) expands the size of an
element. Each side may be indented or outdented independently. Margins
expand or shrink the height and width of a stretched element. Contrast this with
the offset design patterns, where margins move a sized or shrinkwrapped
element without changing its size.

Positive margins indent, and negative margins outdent. In other words, positive

margins move sides toward the center, and negative margins move them away

from the center. You can use left:0, right:0, top:0, and bottom:0 to align the

sides of the absolute element to the sides of its closest positioned ancestor.

Once opposite sides of an element are aligned to its container (in other words,

the element is stretched), margins can indent or outdent each side

independently.

Patterns Horizontally Indented Static Block Element

BLOCK-SELECTOR { position:static; width:auto; margin-left:±VALUE;
margin-right:±VALUE; }

Horizontally Indented Absolute Element

SELECTOR { position:absolute; width:auto; left:0; margin-left:±VALUE;
right:0; margin-right:±VALUE; }

Vertically Indented Absolute Element

SELECTOR { position:absolute; height:auto; top:0; margin-top:±VALUE;

bottom:0; margin-bottom:±VALUE; }

Location This pattern works on static block elements and absolute elements.

Limitations You can’t vertically stretch and indent a static element. You can’t stretch and

indent a float. You can’t stretch and indent an inline-text element. You can’t

indent or outdent an element that is stretched using width:100% or height:100%.

Related to Sized, Shrinkwrapped (Chapter 5); Margin (Chapter 6); Static, Absolute (Chapter
7); Text Indent, Hanging Indent (Chapter 12); Lists, Left Marginal, Right
Marginal (Chapter 13); Padded Graphic Dropcap, Floating Dropcap, Floating
Graphic Dropcap, Marginal Dropcap, Marginal Graphic Dropcap (Chapter 18);
Left Marginal Callout, Right Marginal Callout (Chapter 19); Hanging Alert, Left
Marginal Alert, Right Marginal Alert (Chapter 20)