CHAPTER 8 ■ POSITIONING: INDENTED, OFFSET, AND ALIGNEDOffset Static
Problem You want to control the spacing between static elements in the normal flow by moving
them closer together or further apart.
Solution Margins offset sized and shrinkwrapped elements. Left and top margins offset an element
from the ending position set by the previous element. Right and bottom margins define
the starting position of the following element. Negative margins move an element closer to
surrounding elements, and positive margins move an element farther away. In other
words, margins extend or retract the starting and ending positions of sized and
shrinkwrapped elements.
For example, you can use a positive value in margin-left to move an inline element to the
right, and a negative value to move it to the left. A negative left margin can cause an inline
element to overlap or precede the previous inline element, or overlap the left side of its
containing block. margin-right doesn’t affect an inline element’s position; it affects the
following element’s position. A positive value in margin-right pushes the next element to
the right, and a negative value pulls it to the left. A negative right margin can cause the
following inline element to overlap or precede an element.
margin-top and margin-bottom work similarly with block elements except that they pull
and push blocks up and down. margin-top moves a block up or down, and margin-bottom
moves the following block up or down. Negative margins can move blocks on top of
neighboring blocks.
Inline Patterns Left-extended Static Inline Element (Moved-right)^
INLINE-SELECTOR { position:static; margin-left:+VALUE; }^
Left-retracted Static Inline Element (Moved-left)
INLINE-SELECTOR { position:static; margin-left:-VALUE; }^
Right-extended Static Inline Element (Push-right)
INLINE-SELECTOR { position:static; margin-right:+VALUE; }^
Right-retracted Static Inline Element (Pull-left)
INLINE-SELECTOR { position:static; margin-right:-VALUE; }
Block Patterns Top-extended Static Block Element (Moved-down)
BLOCK-SELECTOR { position:static; margin-top:+VALUE; }^
Top-retracted Static Block Element (Moved-up)
BLOCK-SELECTOR { position:static; margin-top:-VALUE; }^
Bottom-extended Static Block Element (Push-down)
BLOCK-SELECTOR { position:static; margin-bottom:+VALUE; }
Bottom-retracted Static Block Element (Pull-up)
BLOCK-SELECTOR { position:static; margin-bottom:-VALUE; }