CSS Margins

CSS Margins

CSS margins create space outside an element's border and help separate the element from surrounding content.

The margin is the outermost area of the CSS box model. Margins can be applied equally to all four sides or controlled separately for the top, right, bottom, and left sides. Unlike padding, margins are outside the border and do not display the element's background.

How Margins Work

A margin creates transparent space outside an element's border. It can separate the element from neighboring elements or from the edges of its containing area.

.box {
  margin: 20px;
}

This applies a 20px margin to the top, right, bottom, and left sides of the element.

Margins do not have their own background. Any color visible through the margin area comes from content behind the element, such as its parent.

Individual Margin Sides

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

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

Each side can use a different value when uneven spacing is needed.

The margin Shorthand Property

The margin shorthand property can set all four margins with a single declaration. The meaning of the values depends on how many values are supplied.

When four values are used, the order is top, right, bottom, left.

Margin Values

Margins commonly use CSS length values such as px, em, and rem. They can also use percentages and the auto keyword.

.pixels {
  margin: 20px;
}
.relative {
  margin: 2rem;
}
.automatic {
  margin: auto;
}

Unlike padding, margins can also use negative values.

Auto Margins

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

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

The same result is commonly written with the shorthand property:

.box {
  width: 300px;
  margin: 0 auto;
}

In normal block layout, the remaining horizontal space is divided between the automatic left and right margins, centering the box within its containing block.

Percentage Margins

Margins can use percentage values when spacing should be relative to the size of the containing block.

.box {
  margin: 5%;
}

For the physical margin-top, margin-right, margin-bottom, and margin-left properties, percentage values are calculated relative to the width of the containing block.

This means percentage margins can change as the containing block becomes wider or narrower.

Negative Margins

Margins can use negative values. A negative margin reduces spacing on that side and can move elements closer together or cause them to overlap.

.box {
  margin-top: -20px;
}

Negative margins affect layout and should be used carefully because they can cause content to overlap or extend beyond its expected position.

Margins and the Box Model

The margin surrounds the border box and contributes to the space an element requires in the surrounding layout, but it is not part of the element's border-box dimensions.

.box {
  width: 300px;
  padding: 20px;
  border: 5px solid steelblue;
  margin: 30px;
}

With the default box-sizing: content-box, the border box is 350px wide. Adding the 30px left and right margins produces 410px of horizontal space in this simple example.

300px content width
+ 40px padding
+ 10px border
= 350px border box

350px border box
+ 60px margins
= 410px total horizontal space

Vertical margins between normal block elements can behave differently because adjoining vertical margins may collapse. Margin collapsing is covered on the next tutorial page.

Margin Example

The following example uses a bottom margin to create space between two boxes.

.box-one {
  margin-bottom: 40px;
}

Open the example in the editor and change margin-bottom: 40px to values such as 10px, 70px, or 0. Run the example after each change to see how the space between the two boxes changes.