CSS Margin use for make a specific space outside in border. CSS Margin alternate of Padding. Because Padding also make specific space inside border, and Margin make outside border space.

Output

Margin make space between two div or any HTML tag outside

Margin make space between two div or any HTML tag outside

Margin make space between two div or any HTML tag outside

Kinds of CSS Margin

1) Margin Top

How to use CSS Margin top?

Ans: Use only margin-top and give his value. Then margin effect only top side of HTML tag. Where used margin top.

p {
     margin-top: 20px;
}

2) Margin Bottom

How to use CSS Margin Bottom?

Ans: Use only margin-bottom and give his value. Then margin effect only bottom side of HTML tag. Where used margin bottom .

p {
     margin-bottom: 20px;
}

3) Margin Left

How to use CSS Margin Left?

Ans: Use only margin-left and give his value. Then margin effect only left side of HTML tag. Where used margin left.

p {
     margin-left: 20px;
}

Copy code and try to Editor

4) Margin Right

How to use CSS Margin Right?

Ans: Use only margin-right and give his value. Then margin effect only right side of HTML tag. Where used margin right.

p {
     margin-right: 20px;
}

Copy code and try to Editor

5) Margin (You can use only margin for all side margin use.)

How to use CSS Margin?

Ans: Use only margin and give his value. Then this margin effect all side of HTML tag. Where used margin.

p {
     margin: 20px;
}

6) Margin 4 side value (You can use only margin: 10px 0px 5px 10px; 

Where 1st 10px value is top side margin, 2nd 0px value is right side margin, 3rd 5px value is bottom side margin and 4th 10px value is left side marign. )

How to use CSS Margin 4 side value?

Ans: Use only margin and give his value margin:0px 0px 0px 0px;. Then this margin effect all side of HTML tag. Where used margin.

p {
     margin: 20px 10px 30px 0px;
}

7) Margin 3 side value (You can use only margin: 10px 0px 5px; Where 1st 10px value is top side margin, 2nd 0px value is right side margin, 3rd 5px value is bottom side margin. )

How to use CSS Margin 3 side value?

Ans: Use only margin and give his value margin:0px 0px 0px;. Then this margin effect 3 side of HTML tag. Where used margin.

p {
     margin: 20px 10px 30px;
}

8) Margin 2 side value (You can use only margin: 10px 0px; Where 1st 10px value is top side margin, 2nd 0px value is right side margin.)

How to use CSS Margin 2 side value?

Ans: Use only margin and give his value margin:0px 0px;. Then this margin effect 2 side of HTML tag. Where used margin.

p {
     margin: 20px 10px;
}

9) Margin 1 side value (You can use only margin: 10px; Where 10px value is all side margin.)

How to use CSS Margin 2 side value?

Ans: Use only margin and give his value margin:0px;. Then this margin effect all side of HTML tag. Where used margin.

p {
     margin: 20px;
}

10) Margin Auto

How to use CSS Margin Auto?

Ans: Use only margin and give his value margin:auto;. You can set the margin property to auto to horizontally center the element within its container.

p {
     margin: auto;
}

11) Margin Inherit

How to use CSS Margin Auto?

Ans: Use only margin and give his value margin:auto;. The inherit margin lets the left margin be inherited from the parent element.

p {
     margin: inherit;
}

Margin make space between two div or any HTML tag outside

Margin make space between two div or any HTML tag outside

Margin make space between two div or any HTML tag outside

---

Video Tutorial coming soon...