section-root-margin

Venue: check — No margin utilities on the section root — margin opens gaps between sections.

Rule

The section root — the element <Section> renders — must carry no margin utility. Every rendered fixture’s class lists are checked, and every form of the utility counts: plain (my-8), side-specific (mt-4, ms-2), negative (-mb-4), variant-prefixed (md:my-8), and the arbitrary-property escape hatch ([margin-top:2rem]).

Padding is not checked. py-16 on the root is yours to write, and it works.

Reason

A page composes as a vertical stack of full-bleed sections butting edge-to-edge — that is the whole layout model, and zero margin on every section root is what makes it hold. Margin on a root opens a transparent gap between two sections where the page background shows through, and because vertical margins between siblings collapse, the size of that gap depends on which section happens to sit next to yours — a defect that moves when the composition changes.

Padding does not have that failure mode. The root’s background paints under its own padding, so a padded root is still edge-to-edge with its neighbors; whether spacing lives on the root or on an inner well is purely your call.

Fix

Space content with padding — on the root or on a child — and remove the margin utility.

Before

return (
  <Section id={nav.selfAnchor} className="bg-surface my-16">
    …
  </Section>
);

The my-16 opens a page-background gap above and below this section, sized by margin collapse against whatever renders next to it.

After

return (
  <Section id={nav.selfAnchor} className="bg-surface py-16 md:py-24">
    …
  </Section>
);

The same breathing room, painted in the section’s own background, and the stack stays seamless.

See also

• Section — the section root’s full contract.
• The CSS pipeline — where .tr-section is defined and how the cascade layers order it.