Margin and Padding — Controlling Space Inside and Outside

Margin and padding are the two spacing tools in the box model. They look similar at first glance but they do fundamentally different things — knowing which to use in any situation is one of the most important CSS judgment calls you will develop.

The core distinction

Padding is space inside the border — between the element’s content and its boundary. The element’s background color fills the padded area.

Margin is space outside the border — between this element and other elements around it. Margin is always transparent.

The analogy: padding is the cushioning inside a shipping box (it’s inside the box). Margin is the gap you leave on the shelf between boxes (it’s outside the box).

.tour-card {
  padding: 1.5rem;   /* inner breathing room */
  margin-bottom: 2rem; /* space between cards */
  background-color: #fff;
}

The background-color fills the content area and the 1.5rem padding. The 2rem margin is transparent.

Shorthand syntax

Instead of setting each side individually, CSS provides shorthand properties for both padding and margin.

One value — applies to all four sides:

padding: 1rem;
/* top: 1rem, right: 1rem, bottom: 1rem, left: 1rem */

Two values — top/bottom, then left/right:

padding: 1rem 2rem;
/* top: 1rem, bottom: 1rem, right: 2rem, left: 2rem */

Three values — top, left/right, bottom:

padding: 1rem 2rem 1.5rem;
/* top: 1rem, right: 2rem, bottom: 1.5rem, left: 2rem */

Four values — clockwise from the top: top, right, bottom, left:

padding: 1rem 2rem 1.5rem 0;
/* top: 1rem, right: 2rem, bottom: 1.5rem, left: 0 */

The memory trick for four values: Top, Right, Bottom, Left — TRouBLe.

The same shorthand works identically for margin.

Individual side properties

You can also set individual sides using longhand properties:

margin-top: 2rem;
margin-right: 0;
margin-bottom: 2rem;
margin-left: 0;

padding-top: 1rem;
padding-right: 1.5rem;
padding-bottom: 1rem;
padding-left: 1.5rem;

Longhand is useful when you want to override one side within a rule chain without repeating the entire shorthand.

Centering with margin: auto

When you set margin-left: auto and margin-right: auto on a block element with a defined width, the browser distributes the remaining space equally on both sides — centering the element horizontally.

.site-wrapper {
  max-width: 1100px;
  margin: 0 auto; /* 0 top/bottom, auto left/right */
}

margin: 0 auto is the standard pattern for centering a page wrapper. It requires the element to be a block (or inline-block) and have an explicit or max-width — auto margin has nothing to calculate against for an element that takes up 100% width.

margin: auto only centers horizontally for block elements. To center vertically, you need Flexbox or Grid (covered in Module 05).

Negative margins

Margins can be negative. A negative margin pulls an element in the opposite direction — effectively overlapping other elements or pulling the element itself toward its neighbors.

.pull-left {
  margin-left: -1rem; /* element shifts 1rem to the left */
}

Negative margins are useful for small visual adjustments — pulling a decorative element slightly outside its container — but use them sparingly. They are hard to reason about and break easily when content changes.

When to use padding vs margin

Scenario	Use
Space between content and its background/border	Padding
Space between elements	Margin
Making a clickable area larger (button, nav link)	Padding
Separating sections of the page	Margin
Centering a block horizontally	margin: 0 auto

A useful test: if removing the element should also remove the space, use margin. If the space is part of the element’s visual design, use padding.

Exercise

Apply margin and padding to three areas of your Summit Trail Outfitters site:

1. Internal breathing room on tour cards — add padding so the card content doesn’t press against the border:

.tour-card {
  padding: 1.5rem;
  margin-bottom: 2rem;
  background-color: #fff;
  border: 1px solid #d0e8c5;
}

2. Vertical spacing between major sections — use margin to separate the hero from the tours section:

.hero {
  margin-bottom: 4rem;
}

.tours-section {
  margin-bottom: 4rem;
}

3. Center the main content wrapper — add a wrapper div around your page content in index.html (if not already present) and center it:

.site-wrapper {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

The padding: 0 1.5rem adds a small horizontal buffer so content does not touch the viewport edge on small screens.

Note: In Module 07 the full STO stylesheet uses .content-wrapper for this same pattern. The <main> element is not wrapped in a generic .site-wrapper — instead, .content-wrapper is applied inside individual <section> elements so each section controls its own centering. The margin: 0 auto technique is identical; only the class name and HTML structure differ.

Open the page and confirm: the tour cards have internal padding, sections are visually separated, and the content is centered on wide screens.

Recap

• Padding is internal space (between content and border); margin is external space (between elements).
• Background color fills content and padding — not margin.
• Shorthand for both follows the same pattern: 1 value (all sides), 2 values (top/bottom, left/right), 3 values (top, left/right, bottom), 4 values (top, right, bottom, left).
• margin: 0 auto centers a block element horizontally when it has a defined width.
• Vertical margins between block elements collapse to the larger value.
• Use padding to expand clickable/visual area; use margin to push elements apart.

Lesson 04 completes the visual box model with borders — how to style them, round the corners, and use shorthand efficiently.