Display & Margin Collapsing

Before Flexbox and Grid, layout starts with the display property — it decides whether an element behaves like a block, like text, or like nothing at all. This chapter also explains margin collapsing, the classic source of "why is my gap twice as big?" confusion.

The main display values

block vs inline, demonstrated

.tag-inline {
  display: inline;
  background: #eef2ff;
  padding: 4px 8px;      /* padding renders but does NOT affect line height */
  width: 200px;          /* ignored for inline elements */
}

.tag-block {
  display: inline-block;
  background: #eef2ff;
  padding: 4px 8px;
  width: 200px;          /* now it works */
  vertical-align: top;
}

Expected output: the inline tag's background hugs the text and does not push other lines; the inline-block version is exactly 200 px wide and can sit next to other elements.

none vs visibility: hidden

.gone      { display: none; }        /* no space, no render */
.invisible { visibility: hidden; }   /* space kept, nothing painted */

• display: none — element leaves the flow completely (screen readers skip it).
• visibility: hidden — reserves its space; useful for keeping layout stable while content loads.

Margin collapsing

In normal (block) flow, vertical margins between block siblings merge into a single margin — the larger of the two. Horizontal margins never collapse.

.a { margin-bottom: 30px; }
.b { margin-top: 10px; }
/* The visible gap between .a and .b is 30px, not 40px. */

The three collapsing cases

1. Sibling siblings — adjacent block elements' bottom + top margins merge (shown above).
2. Parent and first/last child — a child's top margin can escape the parent if the parent has no border/padding/flow context at that edge. Fix: put a padding or overflow: auto on the parent, or use gap instead.
3. Empty blocks — an element with no content collapses its own top and bottom margins together.

.panel {
  padding-top: 1px;      /* classic trick to stop child margin escape… */
  /* …but the real modern fix: use flex/grid + gap, or padding on parent */
}

.stack > * + * { margin-top: 1.25rem; }  /* predictable vertical rhythm */

Expected output: every stacked child sits exactly 20 px below the previous one, no matter how big individual margins get — because only one margin is ever in play.

Modern spacing: gap

Flex and grid containers support gap, which never collapses and never needs first/last-child hacks:

.row    { display: flex; gap: 1rem; }
.grid   { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.stack  { display: flex; flex-direction: column; gap: 1.25rem; }

Real-world example: vertical rhythm for a page

main {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  max-width: 720px;
  margin-inline: auto;
}

main section { display: flex; flex-direction: column; gap: 1rem; }

Expected output: sections are spaced 40 px apart and their inner blocks 16 px apart — with zero margin rules and no collapsing surprises.

Common mistakes

• Fighting margin collapse with !important — restructure with flex/grid + gap instead.
• Setting width on inline elements — switch to inline-block or (better) flex/grid children.
• Using display: none for off-screen widgets — consider visibility or transform-based hiding when the space should remain.
• Margins on flex/grid children — usually replace them with the container's gap.

Practice checklist

1. Create two paragraphs with margin-bottom: 40px and margin-top: 10px — confirm dev tools show a 40 px gap.
2. Convert a stacked list to flex column with gap and remove every child margin.
3. Toggle display: none vs visibility: hidden on an element and watch the layout shift (or not).

With display understood, containers become powerful — Flexbox: The Complete Guide is next.