Margins

CSS Margins

CSS margins create space outside an element's border. Margins can separate elements from surrounding content, be controlled individually on each side, and use automatic or negative values for certain layout effects.

The margin Property

The CSS margin property creates space outside an element's border. Unlike padding, a margin is outside the element's border and does not display the element's background.

div {
  margin: 20px;
}

This example adds a 20-pixel margin around all four sides of the element.

Margins on Individual Sides

CSS provides four properties for controlling the margin on individual sides of an element.

div {
  margin-top: 10px;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-left: 40px;
}

The margin-top, margin-right, margin-bottom, and margin-left properties allow each side to have a different margin.

Margin Shorthand

The margin shorthand property can set all four margins in one declaration. The number of values determines which sides receive each value.

div {
  margin: 10px 20px 30px 40px;
}

When four values are used, they are applied clockwise in the order top, right, bottom, and left.

One Margin Value

When one value is provided, the same margin is applied to all four sides.

div {
  margin: 20px;
}

This applies 20 pixels of margin to the top, right, bottom, and left.

Two Margin Values

When two values are provided, the first applies to the top and bottom, while the second applies to the left and right.

div {
  margin: 10px 20px;
}

This creates 10 pixels of vertical margin and 20 pixels of horizontal margin.

Three Margin Values

When three values are provided, the first applies to the top, the second applies to the left and right, and the third applies to the bottom.

div {
  margin: 10px 20px 30px;
}

This creates 10 pixels of top margin, 20 pixels of left and right margin, and 30 pixels of bottom margin.

Four Margin Values

When four values are provided, each value controls one side in clockwise order: top, right, bottom, and left.

div {
  margin: 10px 20px 30px 40px;
}

As with padding, a useful way to remember the order is to begin at the top and move clockwise around the box.

Margin Units

Margins accept CSS length values such as px, em, and rem, as well as percentages.

.pixels {
  margin: 20px;
}

.relative {
  margin: 1.5em;
}

.percentage {
  margin: 5%;
}

Percentage margins are calculated relative to the inline size of the containing block, which in normal horizontal writing is usually its width. This also applies to top and bottom percentage margins.

The auto Value

The auto value allows the browser to calculate a margin. A common use is horizontally centering a block element that has a width smaller than the available space.

div {
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}

The same result is commonly written with the margin shorthand.

div {
  width: 300px;
  margin: 0 auto;
}

In this example, the browser distributes the remaining horizontal space between the left and right margins, centering the block within its containing block.

Negative Margins

Unlike padding, margins can use negative values. A negative margin can reduce the space between elements or move an element closer to neighboring content.

div {
  margin-top: -10px;
}

Negative margins affect layout and can cause elements to overlap, so they should be used carefully when the resulting behavior is intentional.

Margins vs. Padding

Margins and padding both create space, but they affect different parts of the box model. Padding creates space inside the border around the content, while margin creates space outside the border.

div {
  padding: 20px;
  margin: 20px;
  border: 2px solid #0088cc;
}

The element's background normally extends through its padding, but it does not extend into its margin.

Try Different Margins

Edit the margin values in the example to see how margins change the space outside each element's border.

Margin Collapsing

Vertical margins of block elements in normal flow can sometimes combine instead of being added together. This behavior is called margin collapsing.

For example, when one block has a bottom margin and the next block has a top margin, the space between them may be determined by the larger margin rather than the sum of both margins.

.first {
  margin-bottom: 30px;
}

.second {
  margin-top: 20px;
}

Under conditions where these margins collapse, the resulting space between the elements is 30 pixels rather than 50 pixels. The next tutorial explains margin collapsing in more detail.

Summary

CSS margins create space outside an element's border. Margins can be controlled separately on each side or with the margin shorthand property. They accept lengths, percentages, auto, and negative values, and they differ from padding because they are outside the element's border.

The next tutorial covers Margin Collapsing and explains why some vertical margins combine instead of adding together.