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 |
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
Comments
Post a Comment