B.63. margin

This property sets the size of the margins surrounding the selected element(s).

The size for each side may be set individually using the margin-bottom, margin-left, margin-right, and margin-top properties.

Inherited: No

See also: Section B.64margin-bottom, Section B.64margin-left, Section B.64margin-right, Section B.64margin-top

B.63.1. Value

You can specify from one to four different values to specify different margin sizes for each side of the element, as shown in Table B-6.

Each value can be a CSS length (px, pt, em, etc.), a percentage of the parent element's width (even for the top and bottom margins^[9]), or the auto constant, which tells the browser automatically to calculate and use a margin that will allow the element to assume its default (or assigned) width.

^[9] This is true with one exception. When the parent element is the body, percentage values for top and bottom margins are based on the document's height instead. This exception does not apply to borders or padding.

Table B-6. Effects of multiple values on margin property

Number of values	Effect on margins
1	All four margins receive the value specified.
2	Top and bottom (horizontal) margins receive the first value, left and right (vertical) margins receive the second.
3	Top margin receives the first value, vertical margins receive the second, bottom margin receives the third.
4	Values are applied to top, right, bottom, and left margins, respectively.

Initial value: 0

B.63.2. Compatibility

CSS Version: 1

Works in all CSS-compatible browsers, including Internet Explorer 4 and Netscape 4.

B.63.3. Example

This style rule sets blockquote elements to be 80% of the width of their parent block. The margin property leaves a 10 pixel margin above and below these elements, and sets the left and right margins to auto so that the block will be centered horizontally.

blockquote {
  width: 80%;
  margin: 10px auto;
}