CSS margin Property


The CSS margin property is used for creating space around the element. CSS provides different properties, with the help of which you can set the margin for an element’s each side (right, left, top and bottom).

CSS Margin property is used to define the space around elements. It is completely transparent and doesn't have any background color. It clears an area around the element.

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

If the margin property has four values:

  • margin: 10px 5px 15px 20px;
    • top margin is 10px
    • right margin is 5px
    • bottom margin is 15px
    • left margin is 20px

If the margin property has three values:

  • margin: 10px 5px 15px;
    • top margin is 10px
    • right and left margins are 5px
    • bottom margin is 15px

If the margin property has two values:

  • margin: 10px 5px;
    • top and bottom margins are 10px
    • right and left margins are 5px

If the margin property has one value:

  • margin: 10px;
    • all four margins are 10px

CSS Syntax

margin: length|auto|initial|inherit;

Supported Browsers:

  • Firefox: 52.0, 2.0 -moz-
  • Google Chrome: 50.0, 4.0 -webkit-
  • Internet Explorer: 10.0
  • Safari: 9.0, 3.1 -webkit-
  • Opera: 37.0, 15.0 -webkit-, 11.1

Example -