Spacing

Luft mellom elementer er noe containeren bestemmer, ikke elementet selv. Det er hele ideen bak spacing i Indeks, og den koker ned til fire regler:

1. Komponenter har ingen ytre margin
2. Bruk gap inni en seksjon
3. Bruk margin mellom seksjoner
4. Sett margin i én retning

En sidelayout kan for eksempel fordeles på denne måten:

Ingen ytre margin på komponenter

Ingen komponent fra Indeks har ytre margin. Da kan du plassere den hvor som helst uten å nullstille noe først, og avstanden settes der den hører hjemme: i containeren.

{/* Knappen har ingen margin */}
<Button>Klikk her</Button>

{/* Containeren styrer avstanden */}
<div className="ix-flex ix-gap-md">
    <Button variant="secondary">Avbryt</Button>
    <Button>Lagre</Button>
</div>

Gap inni seksjoner

Har seksjonen flere elementer, bruk Grid eller Flex med gap. gap legger luft mellom elementene og lager ingen kant utenfor det første og siste, så seksjonen kan fortsatt plasseres fritt.

.card-content {
    display: flex;
    flex-direction: column;
    gap: var(--ix-spacing-md);
}

Margin mellom seksjoner

Mellom seksjoner bruker du block-layout med margin:

.section {
    margin-bottom: var(--ix-spacing-xl);
}

Margin i én retning

Bruk margin-bottom, ikke margin-top. Velger du én retning og holder deg til den, slipper du å regne på hva som skjer der to elementer møtes:

.block-element {
    margin-bottom: var(--ix-spacing-lg);
}

<div class="ix-mb-sm">Liten (sm) margin i bunn</div>

Hvorfor akkurat margin-bottom?

• Elementer stables nedover, så avstanden hører til elementet over
• Margin-collapse blir lettere å forutsi
• Overstyringer treffer bare ett sted
• Det siste elementet i containeren trenger ingen egen håndtering

Skjema med spacing

VStack gir gap: md som standard, så seksjonene under trenger bare margin i bunn:

<form>
    {/* Seksjon 1: personlig info */}
    <section className="ix-mb-md">
        <h2>Personlig informasjon</h2>
        <VStack>
            <TextField label="Fornavn" />
            <TextField label="Etternavn" />
            <TextField label="E-postadresse" />
        </VStack>
    </section>

    {/* Seksjon 2: adresse */}
    <section className="ix-mb-md">
        <h2>Adresse</h2>
        <VStack>
            <TextField label="Gateadresse" />
            <TextField label="Postnummer" />
        </VStack>
    </section>

    {/* Knapper */}
    <HStack>
        <Button variant="secondary">Avbryt</Button>
        <Button>Lagre</Button>
    </HStack>
</form>

Skriver du HTML uten React, er <ix-stack> og <ix-stack horizontal> de samme to. Se Stack for begge variantene, og Spacing-tokens for verdiene bak --ix-spacing-*.