How to use margin and padding

Choose margin or padding

Use padding between content and its border or background. Use margin to separate an element from neighboring elements.

.card {
  padding: 1.25rem;
  margin-block-end: 1.5rem;
}

Read shorthand clockwise

Four-value shorthand follows top, right, bottom, left. Two values mean block-axis then inline-axis in horizontal writing.

.box {
  padding: 1rem 2rem;
  margin: 1rem auto 2rem;
}

Prefer logical properties

Logical properties adapt to writing direction. margin-inline addresses the inline axis and padding-block the block axis.

.article {
  margin-inline: auto;
  padding-block: 2rem;
}

Understand margin behavior

• Vertical margins between normal block elements can collapse
• Padding never collapses
• auto inline margins can center a box with a constrained width
• Use layout gap for spacing between flex or grid children