With Margins Separator for React

When the line sits between mixed siblings that shouldn't share one gap, or when only this break needs a different pause. Prefer a gap when every child belongs to the same stack.

Use mt-8 mb-4 for an uneven pause: more above to close the previous section, less below to attach the next heading.

In a block container like this one, yes: my-6 next to a heading with mt-4 gives 24 pixels, not 40. Inside a flex or grid container margins don't collapse, and they add to the gap.

Avoid them: negative margins overlap content and break at other type sizes. Adjust the positive value instead.

my-4 lg:my-8 is reasonable when the desktop layout has more air. Stay on the same spacing scale as the rest of the page.

Yes, but a horizontal inset needs a width override, as the Inset Separator example shows: the line is full width by default, so mx-8 alone overflows the parent.