How do the margin and padding properties work, including their shorthand value order?

Question

Accepted Answer

Margin is the space outside an element's border (the gap between boxes); padding is the space inside the border (between the border and the content).
A simple way to keep them straight: padding is the cushioning inside the box, margin is the empty space around it. Both accept a single value for all sides, a per-side property, or a shorthand listing several sides at once:
margin: 10px;            /* all four sides */
margin-top: 10px;        /* one side only */
margin: 10px 20px;       /* top/bottom = 10px, left/right = 20px */
margin: 10px 20px 15px 5px;  /* top, right, bottom, left */

Padding uses the exact same patterns (padding, padding-left, padding: 10px 20px, ...).
The trick to the shorthand is the order: think of a clock face, starting at 12 and going clockwise — top, right, bottom, left. So margin: 10px 20px 15px 5px is top 10, right 20, bottom 15, left 5. The two-value form is the handy special case: the first number is top/bottom, the second is left/right, which is why margin: 0 auto; (zero top/bottom, automatic left/right) is the standard idiom for horizontally centring a block.