Learning Code

Margin and Padding

Margin and padding help to customize and control the amount of space on the inside and the outside of an element.

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;}

Can you use the Try-it Editor to try out these concepts?