From Web Education Community Group
Jump to: navigation, search


The margin property is a shorthand property for setting 'margin-top', 'margin-right', 'margin-bottom', and 'margin-left' at the same place in the style sheet.


Values <margin-width>{1,4} | inherit
Initial value See individual properties
Applies to all elements except elements with table display types other than table-caption, table and inline-table
Inherited No


  • <margin-width>{1,4}
    • margin: 10px 20px;
      top and bottom paddings are 10px, right and left paddings are 20px.
    • margin: 10px 20px 30px;
      top padding is 10px, right and left paddings are 20px, bottom padding is 30px.
    • margin: 10px 20px 30px 40px;
      top padding is 10px, right padding is 20px, bottom padding is 30px, left padding is 40px.

  • inherit
    Takes the same specified value as the property for the element's parent.

And see also individual properties


Example A


   background-color: #666;
   background-color: #ccc;
   margin: 50px 10px;


  <p>This is a paragraph</p>
  <p id="mar">This is a paragraph</p>
  <p>This is a paragraph</p>
  <p>This is a paragraph</p>

Csslist2 margin.png

CSS Reference

The CSS specification defines the margin property in 8.3 Margin properties.

See also