In this article, we will learn about the margin in CSS.

Margin in CSS

The margin property specifies the space around an HTML element. It is different from padding as it specifies the space between the element’s content and its border.

The margin is transparent in nature and so, does not have any background color. We can also use negative values of margin to overlap content.

The property values of margin are not passed down to the child elements. Keep in mind that adjacent vertical margins (top and bottom margins) will collapse into each other, so the distance between the blocks(or elements) is only the greater of the two margins or the same size as one margin if both are equal.

We can change the top, bottom, left, and right margins independently using separate properties. and also we can change all these properties at once using the shorthand margin property.

The properties of margin are as follows:

S.no.	Property	Description
1.	margin-top	This property is used to specify the top margin of an element.
2.	margin-bottom	This property is used to specify the bottom margin of an element.
3.	margin-left	This property is used to specify the left margin of an element.
4.	margin-right	This property is used to specify the right margin of an element.
5.	margin	This property is a shorthand property for all four margins and is used to declare all the margins of an element at once.

The margin properties have the following values:

S.no.	Value	Description
1.	auto	In this, the browser automatically calculates the margin.
2.	length	this is used to specify the margin in px, pt, cm, etc.
3.	%	used to define the margin in % of the width of the element.
4.	inherit	used to inherit the margin from its parent element.

For Example:

p {
   margin-top: 40px;
   margin-bottom: 65px;
   margin-left: 50px;
   margin-right: 100px;
   background-color:green;
   }

Output:

Shorthand property of Margin:

This property is used to shorten the code and specify all four margins at once using the margin property.

For Example:

p {
   margin: 40px;
   background-color:green;
   }

Output:

If the margin property has four values:

margin: 40px 15px 75px 50px;

Then,

• top margin: 40px
• right margin: 15px
• bottom margin: 75px
• left margin: 50px

For Example:

p {
   margin: 40px 15px 75px 50px;
   background-color:green;
   }

Output:

If the margin property has 3 values:

margin: 70px 45px 25px;

Then,

• top margin: 70px
• right and left margin: 45px
• bottom margin: 25px

For Example:

p {
   margin: 70px 45px 25px;
   background-color:green;
   }

Output:

If the margin property has 2 values:

margin: 80px 55px;

Then,

• top and bottom margin: 80px
• right and left margin: 55px

For Example:

p {
   margin: 80px 55px;
   background-color:green;
   }

Output:

That’s all about the Margin in CSS.

Hope this article will guide you to recognize all about the Margin in CSS that you needed and still if you have any problems or queries regarding this, post them in the comments section and we will be glad to assist you.