The properties margin-top, margin-right, margin-bottom, margin-left and margin are called margin properties and they specify the width of the margin area of a box.

The value margin-width may be expressed as a fixed width, a percentage or auto. Negative values are allowed and often used for elements overlapping.

The margin-top, margin-right, margin-bottom and margin-left properties contain following information:

  1. value: normal, <margin-width> or inherit;
  2. initial: 0;
  3. applies to: all elements except table based other then caption, table and inline-table;
  4. inherited: no;
  5. percentages: refers to width of containing block;
  6. media: visual;
  7. computed value: percentage specified or absolute length.

The margin property contains following information:

  1. value: normal, <margin-width>{1,4} or inherit;
  2. initial: depends on individual settings;
  3. applies toall elements except table based other then captiontable and inline-table;
  4. inherited: no;
  5. percentages: refers to width of containing block;
  6. media: visual;
  7. computed value: depends on individual settings.

The margin property is a shorthand for all other properties.

This property may have a minimum of one value and maximum of four. If there is only one value, it applied to all four sides of the margin area. If there are two values, the top and the bottom sides will be set to the first number, while the right and the left side will be set to the second. In case of assigning three values, the top is set to the first value, the left and right are set to the second and the bottom is set to the third. Naturally in case of assigning all four values they will be applied to all four sides respectively.

When two or more boxes are sharing margins areas their margins can combine in a single area. Such margins are called collapsing margins. To learn more about collapsing margins go to the "CSS Advanced".

Example

Example of CSS margin properties:

 

›› go to examples ››