Margin
Margins are the empty spaces around the outside of your element. Margins are outside of the border (if there is a border). Keep in mind that margins are always completely transparent.
Values
Values for margin include:
Auto lets the browser control the margins (not always consistent from browser to browser)
Inherit margin is the same as the containing element
Size specifies how big the margins are (units could be px, %, ems or etc.)
None to completely remove any margin
Location
You can set the margin for each side individually. In this case the possible properties include:
margin-top, margin-bottom, margin-right, margin-left
Putting it all together:
section {margin-top: 50px; margin-bottom: 10px; margin-left:20px; margin-right:20px;}
Padding
Padding is the empty spaces inside the border of your element but around the element's content.
Values
Values for padding include:
Inherit padding is the same as the containing element
Size specifies how big the padding is (units could be px, %, ems or etc.)
None to completely remove any padding
Location
You can set the padding for each side individually. In this case the possible properties include:
padding-top, padding-bottom, padding-right, padding-left
Putting it all together:
section {padding-top: 50px; padding-bottom: 10px; padding-left:20px; padding-right:20px;}