What is margin?
Margin is the space around the element (on which the style is applied).
Difference between Margin and Padding
Margin: it provides the space outside the border of the element
Padding: it provides the space inside the border of the element
HTML snippet:
<div id="parent">
This is parent element
<div id="child">
This is child element
</div>
This is parent element
</div>CSS snippet:
#parent{
background-color :#ff55ff;
width : 300px;
}
#child{
background-color : #5555ff;
width : 150px;
margin-top : 50px;
margin-right : 50px;
margin-bottom:50px;
margin-left : 50px;
padding-top : 10px;
padding-right : 10px;
padding-bottom : 10px;
padding-left : 10px;
border : 2px solid #f00;
}Output:
Space outside the border (with pink background) is Margin
Space inside the border (with blue background) is Padding
margin-top, margin-right, margin-bottom, margin-left
margin-top
specifies the top margin of the element.
margin-right
specifies the right margin of the element.
margin-bottom
specifies the bottom margin of the element.
margin-left
specifies the left margin of the element.
HTML snippet:
<div>
Hello world! Welcome to Programming Tute!
This is a sample text placed as a placeholder.
This is a sample text placed as a placeholder.
This is a sample text placed as a placeholder.
This is a sample text placed as a placeholder.
This is a sample text placed as a placeholder.
This is a sample text placed as a placeholder.
This is a sample text placed as a placeholder.
This is a sample text placed as a placeholder.
</div>CSS3 Snippet:
div{
background-color : #e1e1e1;
width : 400px;
margin-top : 100px;
margin-right : 50px;
margin-bottom : 100px;
margin-left : 50px;
}Output:
Left and right margin will be 50px
Top and bottom margin will be 100px
margin (short-form with four parameters)
Instead of providing all the four properties, there is another short way of providing that.
Syntax:
margin : {margin-top} {margin-right} {margin-bottom} {margin-left}
(The values are mentioned same as in clockwise order starting from 12)
CSS3 Snippet:
div{
background-color : #e1e1e1;
width : 400px;
margin : 100px 50px 100px 50px;
}
Output:
Left and right margin will be 50px
Top and bottom margin will be 100px
margin (short-form with three parameters)
If only three parameters are mentioned in the margin property, the last value (margin-left) will take the same value as the margin-right value.
Syntax:
margin : {margin-top} {margin-right &margin-left} {margin-bottom}
(The values are mentioned same as in clockwise order starting from 12)
CSS3 Snippet:
div{
background-color : #e1e1e1;
width : 400px;
margin : 100px 50px 100px;
}
Output:
Left and right margin will be 50px
Top and bottom margin will be 100px
margin (short-form with two parameters)
If only two parameters are mentioned in the margin property,
- The margin-bottom will take the same value as the margin-top value
- the margin-left will take the same value as the margin-right value.
Syntax:
margin : {margin-top &margin-bottom} {margin-right &margin-left}
(The values are mentioned same as in clockwise order starting from 12)
CSS3 Snippet:
div{
background-color : #e1e1e1;
width : 400px;
margin : 100px 50px;
}
Output:
Left and right margin will be 50px
Top and bottom margin will be 100px
margin (short-form with only one parameter)
If only one parameter value is mentioned, then all sides will take the same space.
CSS3 Snippet:
div{
background-color : #e1e1e1;
width : 400px;
margin : 100px;
}
Output:
Margin will be 100px for all the sides.
