Why is there extra space between my elements?

#Margin collapsing

.a { margin-bottom: 20px; }
.b { margin-top: 30px; }

The gap is 30px, not 50px. Adjacent vertical margins collapse to the larger value. It is deliberate — it is what stops stacked paragraphs from drifting apart.

It also happens between a parent and its first or last child, which produces the classic "why is my container pushed down" bug:

.card { background: white; }
.card h2 { margin-top: 1rem; }    /* pushes .card down, not the h2 */

Fixes: give the parent padding, a border, overflow: hidden, or make it a flex/grid container. Margins never collapse inside flex or grid.

The cleanest modern approach is to stop fighting it — use gap, or a single-direction margin rule:

.prose > * + * { margin-top: 1.25rem; }

#Whitespace between inline-blocks

<span class="chip">A</span>
<span class="chip">B</span>

That newline between the tags is a real space character, roughly 4px wide. Solutions: use flexbox with gap (best), or remove the whitespace in the HTML, or set font-size: 0 on the parent (works, but ugly).

#Images and the baseline

img { display: block; }

By default images are inline, so they sit on the text baseline — and the descender space below it becomes a mysterious few pixels under every image. Making them block-level removes it. vertical-align: middle also works.

#line-height on headings

line-height: 1.6 is right for body text and too loose for a large heading. Set line-height: 1.1 on headings; the visual gap above and below usually disappears with it.