Create breathing room with spacing

A clean page and a somehow-hard-to-read page. The difference almost always comes down to spacing (the gaps). When text and parts are crammed together it feels tight, and when they’re spaced just right it looks polished. Let’s learn the two properties that control spacing.

The outer spacing: margin

margin creates a gap around (outside) a part. You use it when you want to open up space between a part and its neighbor.

p {
  margin: 16px;
}

This means “open up a 16-pixel gap around the paragraph.” Now paragraphs don’t stick together — they sit spaced out and relaxed.

The inner spacing: padding

padding creates a gap between the contents and the box’s edge (inside). It shines on things like buttons with a background color, when you don’t want the text stuck right against the edge.

h1 {
  background-color: teal;
  color: white;
  padding: 12px;
}

With just a background color the text sticks to the edge and feels cramped, but adding padding creates room on the inside and makes it much easier to read.

The difference between “outside” and “inside” is clearest when you add color and compare.

Setting all four directions at once

margin: 16px; puts 16px on all four sides, but by lining up several numbers you can set different values for each direction at once.

p {
  padding: 26px 24px 44px;
}

Three numbers go in the order “top, left/right, bottom.” Line up four numbers and you can set them one by one clockwise: “top, right, bottom, left.” Two numbers mean “top/bottom, left/right.” The point is that the number of values changes the meaning.

A quirk of margin: neighbors don’t add up

When two parts are stacked vertically, their margin values sometimes aren’t added together — instead, only the larger one is used.

p {
  margin-bottom: 16px;
}
h2 {
  margin-top: 24px;
}

You’d imagine p’s 16px below plus h2’s 24px above making “a 40px gap,” but the actual gap is only the larger 24px. This is a behavior called “margin collapsing” that happens only in margin’s vertical direction — it doesn’t happen with padding. When a gap is narrower than you expected, suspect this first.

Centering with margin: 0 auto

margin has one more handy use. Set the left and right to auto (automatic), and the part shifts to the center of the screen.

p {
  max-width: 500px;
  margin: 0 auto;
}

This means “top and bottom 0, left and right auto.” auto is the setting “split the leftover space evenly between left and right,” so as a result it looks centered. Using it together with max-width is the standard move — cap the width, then split the leftover left/right space evenly with auto.

Summary of this lesson

1. margin is the gap outside the box
2. padding is the gap inside the box
3. Lining up several numbers lets you set each direction at once
4. margin: 0 auto; lets you shift a part to the center