Margin, Border, and Padding in Practice

Margin, border, and padding each accept shorthand values that control all four sides at once, or each side individually.

.box {
  /* One value: applies to all four sides */
  padding: 20px;

  /* Two values: vertical | horizontal */
  margin: 10px 20px;

  /* Four values: top | right | bottom | left (clockwise) */
  border-width: 1px 2px 3px 4px;

  /* Individual sides */
  padding-top: 8px;
  margin-left: auto;
}

The 1/2/4-value shorthand pattern applies to margin, padding, and border-width identically — memorizing it once covers all three properties.

Margin collapsing is a common surprise: when two block elements stack vertically, their top/bottom margins don't add together — the larger of the two wins.

.first { margin-bottom: 20px; }
.second { margin-top: 30px; }
/* Gap between them is 30px, not 50px */

This only happens with vertical margins between block-level siblings (not horizontal margins, and not with Flexbox/Grid children, which don't collapse).

Centering a block element horizontally is a classic use of margin:

.container {
  width: 800px;
  margin: 0 auto;
}

margin: 0 auto sets top/bottom margin to 0 and lets the browser automatically split the remaining horizontal space evenly on both sides — but this only centers the element if it has an explicit width narrower than its parent.