CSS `margin` Property

Description

The margin CSS property sets the margin on all four sides of the element. It is a shorthand property for margin-top, margin-right, margin-bottom, and margin-left property.

The following table summarizes the usages context and the version history of this property.

Default value:	`0`
Applies to:	All elements except those with table `display` types other than `table- caption`, `table`, and `inline-table`. It also applies to `::first-letter`.
Inherited:	No
Animatable:	Yes. See animatable properties.
Version:	CSS 1, 2, 3

The syntax of the property is given with:

margin:

[ length | percentage | auto ] ^{1 to 4 values} | initial | inherit

The example below shows the margin property in action.

h1 {
    margin: 25px;
}
p {
    margin: 50px 100px;
}

This shorthand notation can take one, two, three, or four whitespace separated values.

If one value is set, this margin applies to all 4 sides.
If two values are set, the first value applies to top and bottom, the second value applies to the right and left side.
Three values apply to the top, horizontal (i.e. right and left) and bottom side.
Four values apply to the top, right, bottom, left side in that order.

The following table describes the values of this property.

Value	Description
`margin-top`	Sets the top margin of the element.
`margin-right`	Sets the right margin of the element.
`margin-bottom`	Sets the bottom margin of the element.
`margin-left`	Sets the left margin of the element.
`initial`	Sets this property to its default value.
`inherit`	If specified, the associated element takes the computed value of its parent element `margin` property.

The margin property is supported in all major modern browsers.