CSS margin (margin)

The CSS margin property defines the space around the element.

Margin

Margin clears the area around the element (outer border). Margin has no background color and is completely transparent

Margin can be changed individually on the top, bottom, left, and right margin of the element. You can also change all properties at once.

Possible values

value	Description
Auto	Sets the browser margin. The results of this will depend on the browser
Length	Define a fixed margin (using pixels, pt,em, etc.)
%	Define a margin that uses percentages

Margin can use negative values, overlapping content.

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

Example margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
Try it»

Margin-Shorthand Property

<p in order to shorten the code, it is possible to use all margin properties specified by margin in a property. This is called the abbreviation attribute. < p= "" >

The abbreviation attribute for all margin properties is "margin":

Example margin:100px 50px;
Try it»

The margin property can have a value of one to four. /p>

• margin:25px 50px 75px 100px;
  • Top margin is 25px
  • Right margin is 50px
  • Bottom margin is 75px
  • Left margin is 100px
• margin:25px 50px 75px;
  • Top margin is 25px
  • Left and right margin is 50px
  • Bottom margin is 75px
• margin:25px 50px;
  • Up and down margin is 25px
  • Left and right margin is 50px
• margin:25px;
  • All 4 margins are 25px

More examples

The top margin of the text is set using the centimeter value
This example shows how to set the top margin of a text with a centimeter value.

Set sets the bottom margin of text using percent values
This example shows how to set the bottom margin using a percent value relative to the width of the containing element.

All CSS margin properties

Properties	Description
Margin	Shorthand property. Set all margin properties in a declaration.
Margin-bottom	Sets the bottom margin of the element.
Margin-left	Sets the left margin of the element.
Margin-right	Sets the right margin of the element.
Margin-top	Sets the top margin of the element.

CSS margin (margin)