Tight Spacing Separator for React

For dense lists, sidebar rows and mobile stacks. When the items are siblings in one group, a 4 pixel gap plus a one-pixel line is enough; use wider gaps when they're different sections.

Often, because more content fits on screen. Keep interactive rows at least 44 pixels tall, though: the gap doesn't make a hit area bigger.

Screen readers ignore visual gaps. People with low vision still need contrast on the line and a clear type hierarchy, so test the layout at 200 percent zoom.

Use gap-1 md:gap-4 when the same list becomes a roomy settings page on large screens. Keep it tight everywhere for data-dense dashboards.

space-y-* adds margins to the children, which can collapse with margins already on them; a flex gap spaces the rows and the line evenly and doesn't depend on the children.

No. Keep the one-pixel line in the border color; the weight comes from spacing, not a second thickness.