Flow-space og spacing i praksis

“Prose” bruges her om længere, sammenhængende tekstindhold, som skal læses: fx artikler, case-tekster, FAQ-svar og andre tekstblokke. Altså ikke små UI-dele som knapper eller badges.

Hvad gør --flow-space-teknikken god?

Flow-space er en enkel måde at styre vertikal afstand på med én default-regel og få, tydelige undtagelser.

Kernen er ikke selectoren alene. Det er kombinationen af:

• en nabo-regel (> * + *)
• en logisk margin (margin-block-start)
• en lokal custom property (--flow-space)

.flow > * + * {
  margin-block-start: var(--flow-space, 1em);
}

Tænk i relationer, ikke kun i pixels

I praksis handler spacing sjældent om “8px overalt”. Det handler om relationer:

• tætte relationer: label -> overskrift
• standard relationer: afsnit -> afsnit
• løsere relationer: afsnit -> ny sektion eller ny overskrift

Det er derfor --flow-space fungerer godt. Du kan have én standardværdi og få lokale variationer uden at skrive mange særregler.

.article {
  --flow-space: 1rlh;
}

.article h2 {
  --flow-space: 1.75rlh;
}

.article h3 + * {
  --flow-space: .5rlh;
}

flow-space, gap og padding har forskellige jobs

De overlapper lidt visuelt, men de bør ikke bruges til det samme:

• flow-space: afstand mellem indholdselementer i en tekstblok eller content-wrapper
• gap: afstand mellem items i grid og flex
• padding: komponentens indre luft mod kanten

Når du holder de roller adskilt, bliver koden både mere læsbar og lettere at ændre.

Brug rlh, når rytmen skal følge typografien

rem er fint til meget, men rlh er ofte mere brugbart til flow-space, fordi afstanden så følger basislinjen i stedet for kun font-size.

.prose {
  --flow-space: .75rlh;
}

.prose blockquote {
  --flow-space: 1.25rlh;
}

Hvis du vil dykke mere ned i units som lh, rlh, cap og rcap, så se siden om units i praksis.

Demo 1: Spacing i en card-komponent

Prøv selv at tilføje --flow-space-teknikken i denne simple card-komponent, hvor både overskrift, brødtekst og knap har brug for vertikal afstand.

Demo 2: Flow-space i en læseblok

Her bruges samme tankegang i længere tekst, hvor --flow-space bliver rygraden i rytmen.