CSS Margin

The CSS margin property defines the space around the element.

margin

margin Clear the surrounding (outer border) element area. The margin has no background color and is completely transparent.

Margin can change the top, bottom, left, and right margins of an element individually, or change all attributes at once.

Possible value

value Description
auto Set browser margins.
The result of this will depend on the browser
length Define a fixed margin (using pixels, pt, em, etc.)
% Define a margin using percentage

Remark Margin can use negative values, overlapping content.

Margin-Unilateral margin attribute

In CSS, it can specify different margins on different sides:

Example

margin-top :100 px ;
 margin-bottom :100 px ;
 margin-right :50 px ;
 margin-left :50 px ;

Margin-shorthand attribute

In order to shorten the code, it is possible to use all the margin properties specified by margin in one property. This is the so-called shorthand attribute.

The shorthand property for all margin properties is margin :

Example

margin :100 px 50 px ;

The margin property can have one to four values.

  • margin:25px 50px 75px 100px;
    • Top margin is 25px
    • The right margin is 50px
    • 75px bottom margin
    • 100px left margin
  • margin:25px 50px 75px;
    • Top margin is 25px
    • 50px left and right margins
    • 75px bottom margin
  • margin:25px 50px;
    • The top and bottom margins are 25px
    • 50px left and right margins
  • margin:25px;
    • All 4 margins are 25px

More examples

The top margin of the text is set using centimeters.
This example demonstrates how to set the top margin of a text that uses centimeters.

Set Use a percentage value to set the bottom margin of
the text This example demonstrates how to set the bottom margin using a percentage value, relative to the width of the contained element.

All CSS margin properties

Attributes description
margin Shorthand attribute. Set all margin properties in one statement.
margin-bottom Set the bottom margin of the element.
margin-left Set the left margin of the element.
margin-right Set the right margin of the element.
margin-top Set the top margin of the element.