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;
}

CSS

Full Editor

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned