You are currently viewing Margin in CSS | Web Development

Margin in CSS | Web Development

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.PropertyDescription
1.margin-topThis property is used to specify the top margin of an element.
2.margin-bottomThis property is used to specify the bottom margin of an element.
3.margin-leftThis property is used to specify the left margin of an element.
4.margin-rightThis property is used to specify the right margin of an element.
5.marginThis 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.ValueDescription
1.autoIn this, the browser automatically calculates the margin.
2.lengththis 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.inheritused 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:

Heading

This is a paragraph with margin top 40px, margin bottom 65px, margin left 50px, and margin right 100px.

This is a normal paragraph

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:

Heading

This is a paragraph with margin of 40px on each side.

This is a normal paragraph

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:

Heading

This is a paragraph with margin top 40px, margin right 15px, margin bottom 75px, and margin left 50px.

This is a normal paragraph

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:

Heading

This is a paragraph with margin top 70px, margin right and left 45px, and margin bottom 25px.

This is a normal paragraph

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:

Heading

This is a paragraph with margin top and bottom 80px, and margin right and left 55px.

This is a normal paragraph

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 problem or queries regarding this, post them in the comments section and we will be glad to assist you.

This Post Has One Comment

Leave a Reply