Du vil style navigasjonslenker som knapper, med padding og margin rundt teksten. Du setter verdiene, men resultatet ser feil ut. Padding-en i topp og bunn overlappes, og margin virker bare horisontalt. Problemet er at lenker er inline-elementer, og inline-elementer respekterer ikke vertikal padding og margin på samme måte. Løsningen heter inline-block i CSS. Det er en displayverdi som kombinerer det beste fra inline og block, og den gir deg full kontroll over boksen uten å bryte flyten.
Hva inline-block i CSS faktisk gjør
Når du setter display til inline-block, oppfører elementet seg som et inline-element utad: det legger seg ved siden av andre elementer på samme linje. Men inni seg oppfører det seg som et blokkelement. Det betyr at du kan sette bredde, høyde, padding og margin i alle retninger, og det fungerer som forventet. Elementet tar ikke opp hele bredden slik et vanlig blokkelement gjør, men det respekterer alle boksmodellens egenskaper.
Problemet inline-block løser
Rene inline-elementer som lenker og span har et kjent problem: vertikal padding og margin påvirker ikke layouten rundt dem. Du kan sette padding-top på en lenke, og den tegnes visuelt, men den skyver ikke elementene over bort. Resultatet er overlapping og rot. I videoleksjonen demonstreres dette tydelig: navigasjonslenker med padding på 10 pikseler gir et merkelig resultat fordi lenkene er inline. Bytter du til display block, fungerer padding og margin, men da havner hver lenke på sin egen linje. Inline-block er kompromisset som gir deg begge deler.
Når du bør bruke inline-block
Det klassiske bruksområdet er navigasjonsknapper, som vist i videoen. Du har lenker som skal ligge ved siden av hverandre, men du trenger padding og margin for å forme dem som knapper. Andre vanlige situasjoner er:
- Knapper i en rad som trenger lik avstand og vertikal padding
- Bildetekster eller ikoner som skal ligne på blokkelementer uten å bryte linjen
- Elementer i en horisontal liste der du vil styre dimensjoner manuelt
For mer avanserte layouter med automatisk fordeling av plass er flexbox ofte et bedre valg. Men for enkle tilfeller der du bare trenger full boksmodellkontroll på et inline-element, er inline-block fortsatt riktig verktøy.
Inline-block og mellomrom
En overraskelse mange møter med inline-block er uventede mellomrom mellom elementene. Fordi nettleseren behandler inline-block-elementer som tekst, lager linjeskift og mellomrom i HTML-koden et lite gap mellom dem. Du ser noen få pikselers avstand selv om du ikke har satt margin. Vanlige løsninger er å fjerne mellomrommet i HTML-en, sette font-size til null på forelderelementet, eller bruke flexbox i stedet. Dette er en av grunnene til at flexbox ofte foretrekkes for moderne layouter.
Forskjellen mellom inline, block og inline-block
Her er en oversikt over de tre displayverdiene og hva de tillater:
- Inline legger seg i tekstflyten, respekterer ikke vertikal padding og margin, og du kan ikke sette bredde eller høyde
- Block tar opp hele bredden, starter på ny linje, og du har full kontroll over alle boksmodellens egenskaper
- Inline-block legger seg ved siden av andre elementer, men gir deg full kontroll over bredde, høyde, padding og margin
Videoleksjonen illustrerer dette treffende med utviklerverktøy: når du bytter displayverdi fra inline til block til inline-block, ser du umiddelbart hvordan elementets oppførsel endres. Du kan lese mer om de ulike displayverdiene i MDN sin dokumentasjon om display.
Lær mer om inline-block i CSS med video
Denne artikkelen bygger på en videoleksjon fra CSS-kurset på Utdannet.no. I kurset lærer du:
- Hvordan du bygger navigasjonsknapper med inline-block, padding og hover-effekter
- Hvordan du bruker utviklerverktøy til å eksperimentere med displayverdier i sanntid
- Hvordan boksmodellen oppfører seg forskjellig med inline, block og inline-block
