Margin and Padding

Margin and padding are the properties for declaring space around page elements. Margin is the space outside of an element, whereas padding is the space inside an element.

Setting the margin or padding as a singular style declaration usually applies the same amount of space on all four sides and an element equally.

margin: 1em; applies one EM space (the width of the capital M character relative to the font face and font size being used in the element) of margin to all four sides of the element being styled.

The four sides of an element can also be set individually. margin-top, margin-right, margin-bottom, margin-left, padding-top, padding-right, padding-bottom and padding-left are the self-explanatory properties you use.

padding-top: 1em;
padding-bottom: 1em;
margin-left: 1em;
margin-right: 1em; taken together, these styles apply one EM space of padding to both the top and bottom of the element being styled, and applies one EM space of margin to both the left and right of the element.

The four sides of an element can also be styled individually within the same style declaration with the "TRBL" shorthand. Just remember it's not all that much TRouBLe  to simplify your style declaration by defining Top, Right, Bottom, Left in that specific order. Or start at the Top and proceed clockwise. An example:

padding: 1em 2em 0 1em; applies one EM space of padding to the top, two EM spaces of padding to the right, no padding to the bottom, and one EM space of padding to the left.