CSS PROPERTIES
Expand All | Collapse All
CSS AT-RULES
Advertisements

CSS margin Property

Topic: CSS3 Properties ReferencePrev|Next

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

Syntax

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.

Property Values

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.

Browser Compatibility

The margin property is supported in all major modern browsers.

Browsers Icon

Basic Support—

  • Firefox 1+
  • Google Chrome 1+
  • Internet Explorer 3+
  • Apple Safari 1+
  • Opera 4+

Further Reading

See tutorial on: CSS Margin, CSS Box Model.

Related properties: margin-top, margin-right, margin-bottom, margin-left.

Advertisements
Bootstrap UI Design Templates Property Marvels - A Leading Real Estate Portal for Premium Properties