Margin in CSS-Explained

 MARGIN

Margin is a external space given to a element, and those elements are images paragraph heading etc, and this margin is given to create good user interface and make content pleasing to our eyes.

So here question arises, Where to give a margin: so we can give margin to : 

TOP of element.

BOTTOM of element.

RIGHT of element.

LEFT of element.

Here is box model diagram to get better overview of margin:

CSS Box Model

this box model contain an element, whereas height and width is shown in picture then padding is written (top,bottom,right,left) which means inner space given between a border, then border field is their which is outer outline of a element, then external space shown is margin.

Syntax of giving a Margin:

let, i wrote a heading in html - <h4 id="head">You are reading my blog</h4>

In CSS that's how we declare margin to every side 

#head{

margin-right:50px;

margin-left:75px;

margin-top:100px;

margin-bottom:125px;

}

In above example individual margin is given to right, left, top and bottom corner that's how you can give INDIVIDUAL MARGIN to every end.

COMMON MARGIN:

If you declare margin like this :

 p{

margin: 50px;

}

then from every side equal space of 50 pixel will declared.

SHORT HAND PROPERTY OF MARGIN:

To make our code more consise and smart css has function of inbuilt properties of declaring margin of every side in one go.

like this: 

p{

margin: 25px 30px 35px 40px;

}

here 25px is top margin

30px is right margin

35px is bottom margin 

and 40px is left margin

like a arrow moving in a anti-clockwise direction😃

WHAT if ,you write 3 margin values? 

p{

margin: 10px 20px 30px ;

}

then first margin 10px define TOP margin

second margin 20px define RIGHT and LEFT margin

and third margin 30px define BOTTOM margin

WHAT if, you write only 2 margin values?

p{

margin: 95px 105px ;

}

here first margin 95px define TOP and BOTTOM margin

and second margin 105px define RIGHT and LEFT margin

INHERIT MARGIN

if we write inhert in the margin tag, then margin of parent class is aloted.

div{

margin: 20px ;

}

a{

margin: inherit ;

}

MARGIN COLLAPSE :

As cleared by name collapse(or a blurry image is formed) that margin is going to collapse, so margin is collapsed only in top and bottom margin value, not in right & left. 

p{

margin-bottom: 90px ;

}

h4{

margin-top: 50px ;

}

so if margin is collapse then higher value of margin is declared, so here 90px is output margin.

As shown in below figure that bottom margin of upper element is 90px and top margin of lower element is 50px so total 90px of margin is allotted