Margins and Padding: Space Inside and Outside

Both properties create space, but they operate in fundamentally different parts of the box model and have different behaviors. Mastering them is essential for precise layout control.

1. The Core Difference at a Glance

  MARGIN    │  BORDER  │  PADDING  │  CONTENT  │  PADDING  │  BORDER  │  MARGIN
  (outside) │          │ (inside)  │           │ (inside)  │          │ (outside)

Feature	padding	margin
Location	Between content and border	Outside the border
Background	Takes element's background color	Always transparent
Negative values	❌ Not allowed	✅ Allowed
Margin collapsing	❌ Never collapses	✅ Vertical margins collapse
auto behavior	No centering effect	✅ auto centers block elements
Affects click area	✅ Expands clickable region	❌ Does not
box-sizing	Included in border-box width	Never included in width

2. Padding: Inner Space

Padding creates space between the content and the border. The background of the element extends through padding.

/* Individual sides */
.box {
  padding-top:    20px;
  padding-right:  30px;
  padding-bottom: 20px;
  padding-left:   30px;
}

/* Shorthand: clockwise from top — T R B L ("TRouBLe") */
.box { padding: 20px 30px 20px 30px; }  /* 4 values: T R B L */
.box { padding: 20px 30px; }            /* 2 values: T/B  L/R */
.box { padding: 20px; }                 /* 1 value:  all sides */
.box { padding: 10px 20px 30px; }       /* 3 values: T  L/R  B */

Fluid Padding with clamp()

section  { padding: clamp(2rem, 6vw, 5rem); }       /* Fluid vertical padding */
.card    { padding: clamp(1rem, 3vw, 2.5rem); }     /* Fluid card padding */
.container { padding: 0 clamp(1rem, 4vw, 2rem); }   /* Fluid horizontal padding */

Percentage Padding Trick (Aspect Ratio)

Percentage padding is always relative to the parent's width — even for padding-top. This creates a fixed aspect ratio placeholder:

/* 16:9 ratio container (before aspect-ratio CSS was available) */
.video-wrapper {
  position: relative;
  padding-top: 56.25%; /* 9/16 = 56.25% */
}
.video-wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; }

3. Margin: Outer Space

Margin creates space outside an element's border, separating it from neighboring elements or its container.

/* Individual sides */
.box  { margin-top: 20px; margin-bottom: 20px; }

/* Same shorthand as padding */
.box  { margin: 20px; }               /* All sides */
.box  { margin: 20px 40px; }          /* T/B: 20px, L/R: 40px */
.box  { margin: 10px 20px 30px 40px; } /* T R B L */

Centering with margin: auto

/* Center a block element horizontally */
.container { width: 100%; max-width: 1200px; margin: 0 auto; }

/* Center absolutely positioned element (with known width) */
.modal { position: absolute; left: 50%; transform: translateX(-50%); }

/* Flexbox: push last item to the right */
.nav__cta { margin-left: auto; }

Negative Margins

/* Pull element outside its container */
.full-bleed { margin: 0 -2rem; }

/* Classic two-column overlap */
.sidebar { margin-top: -100px; }    /* Pulls sidebar up into the hero */

/* Remove unwanted first/last child spacing */
.content > *:first-child { margin-top: 0; }
.content > *:last-child  { margin-bottom: 0; }

4. Margin Collapsing — The Most Confusing Behavior

When two vertical margins meet, they collapse into a single margin equal to the larger of the two:

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

/* The gap between h2 and p is 24px (not 40px) — they collapsed */

When Does Collapsing Happen?

1. Adjacent siblings: The margin-bottom of one element + margin-top of the next.
2. Parent and first/last child: Parent's margin-top collapses with child's margin-top if there's no border, padding, or overflow separating them.
3. Empty elements: An element's top and bottom margin collapse into one if it has no height, border, or padding.

Preventing Margin Collapsing

/* On the parent — prevents parent/child collapse */
.parent { overflow: hidden; }         /* Creates BFC */
.parent { display: flow-root; }       /* Creates BFC (no side effects) */
.parent { padding-top: 1px; }         /* Provides separation */
.parent { border-top: 1px solid transparent; } /* Same */

/* Using `gap` in Flexbox/Grid (margins DON'T collapse in flex/grid) */
.flex-column { display: flex; flex-direction: column; gap: 1.5rem; }

5. margin: auto in Flexbox

In a flex row, margin: auto absorbs all remaining space:

.nav { display: flex; align-items: center; }
.nav__logo   { /* On the left */ }
.nav__links  { margin-left: auto; }  /* Pushes everything after it to the right */
.nav__cta    { /* On the right */ }

6. Logical Properties (Modern CSS)

Instead of top, left, right, bottom (physical), use logical properties that adapt to text direction (RTL support, vertical writing modes):

/* Physical → Logical equivalents (for LTR layout, they're identical) */
margin-top    → margin-block-start
margin-bottom → margin-block-end
margin-left   → margin-inline-start
margin-right  → margin-inline-end

/* Shorthand logical properties */
.box { margin-block: 1rem; }         /* margin-top + margin-bottom */
.box { margin-inline: 2rem; }        /* margin-left + margin-right */
.box { padding-block: 1.5rem; }
.box { padding-inline: 2rem; }