CHAPTER 6 ■ BOX MODELS PROPERTIESMargin
Problem You want to put a margin on one or more of the sides of an element. You want the margin to
be transparent to the background of the element’s parent.
Solution You can use a selector to assign the margin property to an element. You can independently
set margin-left, margin-right, margin-top, and margin-bottom. Margin can be positive or
negative. Negative values may overlap elements. margin works differently depending on the
type of element.
margin:±VALUE You can assign a measurement or percentage to margin. A percentage refers to a percentage
of the containing block’s width. margin:0 is the default CSS value, but browsers assign
different default margins to specific elements.
On an inline element, margin-top and margin-bottom are ignored.
On an inline or inline-block element, a positive value in margin-left moves the element
away from the previous element, and a negative value moves it closer. A positive value in
margin-right moves the next element further away, and a negative value moves it closer.
On an inline-block element, such as an image, a positive value in margin-top expands the
height of the line, and a negative value shrinks it. A positive value in margin-bottom raises
the element, and a negative value lowers it.
On a sized block element, a positive or negative value in margin-left and margin-right
offsets it from its point of alignment. A positive value in margin-top and margin-bottom
pushes neighboring blocks further apart, and a negative value brings them closer together.
A browser collapses top and bottom margins of neighboring block elements.
On a stretched block or stretched absolute element, a positive margin indents the sides
of the element, and a negative value outdents them. Indents shrink an element’s inner box,
pushing borders and padding inward.
On a table or a sized or shrinkwrapped absolute element, a positive or negative margin
value offsets it from its point of alignment. Margins on a stretched table don’t indent the
table but cause it to overflow its container.
On a float, a positive margin pushes the float away from its point of alignment and pushes
other floats and inline content away from it. A negative margin pulls the float to the other
side of its point of alignment and pulls other floats and inline content closer. Margins on a
stretched float don’t indent the float but cause it to overflow its container.
margin:auto On most elements, margin:auto is the same as margin:0 (that is, no margin).
On a static block element and a stretched absolute element, auto automatically expands
the margin. For example, margin-left:auto and margin-right:0 align a sized element to
the right.
Pattern SELECTOR { margin:±VALUE; }^
Location margin works on most elements. It doesn’t work on internal table elements, such as table
cells. Vertical margins don’t work on inline elements.
Related to Border, Padding; all patterns in Chapters 4, 7, 8, and 9; Spacing, Inline Spacer, Linebreak,
Inline Horizontal Rule (Chapter 11); Text Indent, Hanging Indent (Chapter 12); Lists,
Background Bulleted, Collapsed Margins, Horizontal Rule, Block Spacer, Block Spacer
Remover, Left Marginal, Right Marginal (Chapter 13); Outside-in Box, Float Divider
(Chapter 17)