CSS Margins

Margins are used to create space around elements, outside of any defined borders.

1. Margin - Individual Sides

CSS has properties for specifying the margin for each side of an element:

• margin-top
• margin-right
• margin-bottom
• margin-left

Values can be:

• auto: The browser calculates the margin.
• length: Specifies a margin in px, pt, cm, etc.
• %: Specifies a margin in % of the width of the containing element.
• inherit: Specifies that the margin should be inherited from the parent element.

2. Margin - Shorthand Property

To shorten the code, it is possible to specify all the margin properties in one property.

Four values: margin: 25px 50px 75px 100px;

• top margin is 25px
• right margin is 50px
• bottom margin is 75px
• left margin is 100px

Three values: margin: 25px 50px 75px;

• top: 25px
• right and left: 50px
• bottom: 75px

Two values: margin: 25px 50px;

• top and bottom: 25px
• right and left: 50px

One value: margin: 25px;

• all four margins are 25px

3. The auto Value

You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins.

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