CSS Reference Guide: margin

The CSS margin shorthand property is used to create space around an element outside of any defined borders. It defines the outermost portion of the box model.

Jump ahead:

• Demo
• Syntax
• Values
  • One value
  • Two values
  • Three values
  • Four values
  • Centering elements
  • Negative values

The margin property can be specified using lengths, percentages, and keywords such as auto. It can also accept negative values.

Demo

See the Pen
CSS Margin Example by Solomon Eseme (@kaperskyguru)
on CodePen.

Syntax

div {
  margin: <length> | <percentage> | auto
}

margin is a CSS shorthand property used to define up to four values for margin-top, margin-right, margin-left, and margin-bottom.

div {
  margin: 2px 3px 4px 5px;
}

The equivalent margin can be defined as below.

div {
  margin-top: 2px;
  margin-right: 3px;
  margin-left: 5px;
  margin-bottom: 4px;
}

Values

The margin proprety can accept one to four values.

One value

When one value is supplied to the margin shorthand property, it applies the same margin value to all four sides.

div {
  margin: 5px;
}
 // SAME AS
div {
  margin-top: 5px;
  margin-right: 5px;
  margin-bottom: 5px;
  margin-left: 5px;
}

Two values

When two values are supplied to the margin property, the first value is applied to the top and bottom margins, while the other is applied to the left and right.

div {
  margin: 5px 3px;
}
 // SAME AS
div {
  margin-top: 5px;
  margin-right: 3px;
  margin-left: 3px;
  margin-bottom: 5px;
}

Three values

When three values are supplied, the first value is applied to the top margin; the second value is applied to the left and right margins; and the third value is applied to the bottom margin.

We made a custom demo for .
No really. Click here to check it out.

Click here to see the full demo with network requests

div {
  margin: 5px 3px 1px;
}
 // SAME AS
div {
  margin-top: 5px;
  margin-right: 3px;
  margin-left: 3px;
  margin-bottom: 1px;
}

Four values

When four values are supplied, the values are applied in clockwise order. In other words: the first value is applied to the top margin; the second value is applied to the right margin; the third value is applied to the bottom; and the fourth value is applied to the left.

div {
  margin: 5px 3px 1px 6px;
}
 // SAME AS
div {
  margin-top: 5px;
  margin-right: 3px;
  margin-left: 6px;
  margin-bottom: 1px;
}

Centering elements

With the use of the auto keyword, it is very easy to center elements in the container using margin.

div {
  margin: 2em auto;  /* top and bottom: 2em margin   */
                    /* Box is horizontally centered */
}

div {
  margin: auto;    /* top and bottom: 0 margin     */
                  /* Box is horizontally centered */
}

Negative values

When negative values are supplied to the margin, they pull the element in a particular direction rather than push it.

For example, the snippet below will pull the element towards the top by 5x, towards the right by 3x, towards the left by 6px, and towards the bottom by 1px.

div {
  margin: -5px -3px -1px -6px;
}

Is your frontend hogging your users' CPU?

As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, try LogRocket.https://logrocket.com/signup/

LogRocket is like a DVR for web apps, recording everything that happens in your web app or site. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.

Modernize how you debug web apps — Start monitoring for free.