CSS Margins

CSS has properties for specifying the margin for each side of an element: margin-top, margin-right, margin-bottom, and margin-left.

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

Margin Shorthand Property

To shorten the code, it is possible to specify all the margin properties in one property. The margin property is a shorthand property for this.

Four values:

p {
  margin: 25px 50px 75px 100px; /* top, right, bottom, left */
}

Three values:

p {
  margin: 25px 50px 75px; /* top, horizontal, bottom */
}

Two values:

p {
  margin: 25px 50px; /* vertical, horizontal */
}

One value:

p {
  margin: 25px; /* all four sides */
}