BetterCSS

Margin pushes an element away from its neighbors. It sits outside the border, can collapse with adjacent margins, and accepts keywords like auto, not just pixel lengths.

When to use

Separating sections, centering block elements with auto margins, or pushing items to one side without flexbox.

Core concepts

  • Margin is outside the border box, it never affects background or click area.
  • auto eats leftover space on that side. mx-auto centers a block with a defined width.
  • Vertical margins can collapse between siblings; padding never does.
  • Combine mx-auto with w-full and max-w-* to center content without display:flex.

Class combinations

Utilities stack. These recipes do more together than any single class alone. Try them after you've explored the sandbox above.

  • Block centering without flex

    mx-auto w-full max-w-md

    Auto left/right margins split leftover space equally. The width cap keeps the box from stretching edge to edge.

  • Vertical rhythm

    my-8 first:mt-0 last:mb-0

    Consistent section spacing with sensible edges, no double margin at the start or end.

  • Push to the end

    ml-auto

    In a block or flex row, auto left margin eats all free space on the left, item hugs the right.

Summary

  • margin pushes elements away from neighbors. It lives outside the border box and collapses vertically between block siblings.
  • Use margin to separate components in flow, center block elements horizontally (auto left/right), or offset from a parent edge.
  • Margin is transparent: it does not inherit the element background and can collapse with adjacent margins.
  • Prefer gap inside flex/grid containers instead of margin on every child. Less boilerplate and fewer collapse surprises.
  • Tailwind spacing scale (m-*, mt-*, etc.) maps to the same rem steps as padding but affects outer space only.