Spacing

{ margin: } { padding: }

To set spacing with elements you use margins and padding. Margin is the outside space between different elements. Padding is the inside space between an element's content and it's outside edge. You can set the margin or padding equally on all 4 sides of an element or you can set them individually for each side. For example: margin: 10px; will add a margin of 10px to all 4 sides. Alternatively you can set just the bottom margin with: margin-bottom, or just the right margin with margin-right, etc. The same applies for padding.

One

Two

Three

HTML

<div id='one'>One</div>

<div id='two'>Two</div>

<div id='three'>Three</div>

CSS

#one {

margin-bottom:

px ;

margin-right:

px ;

padding-bottom:

px ;

padding-right:

px ;

}

Basically, padding increases the size of an element, while margins increase the space between elements. There is another setting for margins that isn't covered here, but is worth learning soon, and that is setting left and right margins to auto. This automatically calculates what how big to make left and right margins so that they are equal. The effect of this is that the element is perfectly centered horizontally. This doesn't work for top and bottom margins.