CSS margin Property

CSS margin property is a shorthand property for setting all four sides margin in one statement i.e. margin-top, margin-right, margin-bottom, and margin-left.

Following properties can be sets,

Usages

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

Default value: 0
Applies to: All elements except display: table, display: table-caption, display: inline-table
Inherited: No
Version: CSS1
JavaScript Syntax: object.style.margin = "10px 0px 15px 5px"

Syntax

Here is a syntax for the CSS margin property

 margin: length | percentage | auto | initial | inherit;

CSS margin property may be specified using one, two, three, or four values.

  • Margin: 12px;
    All four sides apply margin 12 pixels.
  • Margin:10px 20px;
    Top and bottom side margin 10 pixels.
    Right and left side margin 20 pixels.
  • Margin: 10px 20px 30px;
    Top side margin 10 pixels.
    Left and right side margin 20 pixels.
    Bottom side margin 30 pixels.
  • Margin: 10px 20px 30px 40px;
    Top side margin 10 pixels.
    Right side margin 20 pixels.
    Bottom side margin 30 pixels.
    Left side margin 40 pixels.

Property Values

The following table describes the values of this property.

Value Description
margin-top Specifies the top margin of the element
margin-right Specifies the right margin of the element
margin-bottom Specifies the bottom margin of the element
margin-left Specifies the left margin of the element
initial Sets default value of this property
inherit Inherits this property from its parent element.

Examples

The example below shows to sets margin values of the element.

 .margin-1 {   margin: 10px; } .margin-2 {   margin: 10px 15px; } .margin-3 {   margin: 10px 15px 20px; } .margin-4 {   margin: 10px 15px 20px 10px; }

Browser Compatibility

  • Google Chrome 1+
  • Mozilla Firefox 1+
  • Internet Explorer 6+
  • Opera 3.5+
  • Safari 1+

Note: Here details of browser compatibility with version number may be this is bug and not supported. But recommended to always use latest Web browser.