SyntaxStudy
Sign Up
CSS Beginner 1 min read

Margin & Padding

Margin & Padding

Shorthand Syntax

Both margin and padding accept 1–4 values:

  • padding: 16px — all four sides
  • padding: 8px 16px — top/bottom, left/right
  • padding: 4px 8px 12px 16px — top, right, bottom, left (clockwise)

Centering with margin

margin: 0 auto centres a block element horizontally (it must have a set width).

Margin Collapse

When two vertical margins meet, they collapse into the larger one. This only happens with vertical (top/bottom) margins.

Example
.container {
  width: 800px;
  margin: 0 auto;          /* center horizontally */
}

.card {
  padding: 24px 32px;      /* 24px top/bottom, 32px left/right */
  margin-bottom: 24px;
}

.button {
  padding: 12px 24px;
  margin: 8px;
}

/* Individual sides */
.hero {
  margin-top: 0;
  margin-bottom: 48px;
  padding-left: 16px;
  padding-right: 16px;
}