3.2 KiB

Raw Blame History

title
Margins

Margins

The margin CSS property sets the margin area on all four sides of an element. This property can be used to generate space around content (outside the border). It is a shorthand to set all individual margins at once: margin-top, margin-right, margin-bottom, and margin-left. Values are defined in the clockwise direction.

Margin values are set using lengths or percentages or auto or inherit keyword, and may accept zero or negative values. The initial, or default, value for all margin properties is 0. While you can use inherit keyword but it can not be used along with a length value.

Syntax

.element {
    margin: margin-top || margin-right || margin-bottom || margin-left;
}

This property may be specified using one, two, three, or four values.

When one value is specified, it applies the same margin to all four sides.
When two values are specified, the first margin applies to the top and bottom, the second to the left and right.
When three values are specified, the first margin applies to the top, the second to the left and right, the third to the bottom.
When four values are specified, the margins apply to the top, right, bottom, and left in that order (clockwise).

/* Apply to all four sides */
margin: 1em;
  
/* top and bottom | left and right */
margin: 5% 10%;
  
/* top | left and right | bottom */
margin: 1em 2em 2em;

/* top | right | bottom | left */
margin: 5px 1em 0 1em;

Where in box model

The margin property in CSS defines the outermost portion of the box model, creating space around an element's content, outside of any defined paddings and/or borders.

Collapsing margins

Vertical margins on different elements that touch each other (thus have no content, padding, or borders separating them) will collapse, forming a single margin that is equal to the greater of the adjoining margins. This does not happen on horizontal margins (left and right), only vertical (top and bottom).

Centering an element using margin

An element can be aligned to the center by making it a block element and changing the values of the left and right margins to auto.

.c-pos {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

Unit Information

Pixels (px) are relative to the viewing device.
em implies relative to the font-size of the element (2em means 2 times the size of the current font).
% implies relative to the parent element.

Browser Support

It is effectively supported in all browsers (since IE6+, Firefox 2+, Chrome 1+ etc)

3.2 KiB Raw Blame History