The Difference Between Margin & Padding
Padding is within an element and margin is outside an element.
When to use each one:
Use padding if you want to create space around an element or part of an element to give it more breathing room.
Use margin when you want to place an element a certain distance away from another element or the edge of a page.
Margin
Syntax:
margin-top: 100px;
margin-right: 75px;
margin-bottom: 50px;
margin-left: 25px;
Negative Margin
Syntax: margin-top: -200px; or margin: -200px 20px 20px 20px;
The City At Night
Margin Shorthand
Four Values
Syntax: margin: 10px 20px 30px 40px;
Top margin = 10px
Right margin = 20px
Bottom margin = 30px;
Left margin = 40px;
Two Values
Syntax: margin: 10px 20px;
Top margin = 10px
Right margin = 20px
Bottom margin = 10px;
Left margin = 20px;
Three Values
Syntax: margin: 10px 20px 30px;
Top margin = 10px
Right margin = 20px
Bottom margin = 30px;
Left margin = 20px;
One Value
Syntax: margin: 10px;
Top margin = 10px
Right margin = 10px
Bottom margin = 10px;
Left margin = 10px;
Margin Auto
Syntax: margin: auto; or margin: 20px auto;
Padding
Syntax:
padding-top: 100px;
padding-right: 75px;
padding-bottom: 50px;
padding-left: 25px;
No Padding
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Proin eget tortor risus. Curabitur aliquet quam id dui posuere blandit. Curabitur aliquet quam id dui posuere blandit. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Pellentesque in ipsum id orci porta dapibus. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
Padding
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Proin eget tortor risus. Curabitur aliquet quam id dui posuere blandit. Curabitur aliquet quam id dui posuere blandit. Quisque velit nisi, pretium ut lacinia in, elementum id enim. Pellentesque in ipsum id orci porta dapibus. Cras ultricies ligula sed magna dictum porta. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
Padding Shorthand
Four Values
Syntax: padding: 10px 20px 30px 40px;
Top padding = 10px
Right padding = 20px
Bottom padding = 30px;
Left padding = 40px;
Two Values
Syntax: padding: 10px 20px;
Top padding = 10px
Right padding = 20px
Bottom padding = 10px;
Left padding = 20px;
Three Values
Syntax: padding: 10px 20px 30px;
Top padding = 10px
Right padding = 20px
Bottom padding = 30px;
Left padding = 20px;
One Value
Syntax: padding: 10px;
Top padding = 10px
Right padding = 10px
Bottom padding = 10px;
Left padding = 10px;