Margin

Relax. We'll talk through this in plain words — no textbook voice.

What you'll walk away with

Learn to control the spacing between elements

margin is the spacing outside an element. It's used to create space between sections, between a heading and a paragraph, or between cards. margin: 0 auto; is commonly used when you want to center an element that has a fixed width.

css

.container {
  width: min(100% - 32px, 960px);
  margin: 0 auto;
}

.section-title {
  margin-bottom: 16px;
}

You should see

The container stays centered on the screen, and on mobile it keeps 32px of spacing so it doesn't touch the edges.

Warning

Because of a behavior called margin collapse, vertical margins can sometimes not show up the way you'd expect. Consider using padding for section spacing too.