Du har lagt til CSS på et element, men noe oppfører seg rart. Bredden du satte fungerer ikke, og elementet strekker seg over hele siden selv om innholdet bare er noen få ord. Årsaken ligger i forskjellen mellom block og inline i CSS. Alle HTML-elementer har en standard display-verdi som bestemmer hvordan de oppfører seg i layout. Når du forstår denne forskjellen, slipper du å lure på hvorfor CSS-reglene dine tilsynelatende ignoreres.
Block-elementer tar full bredde
Et block-element begynner alltid på ny linje og fyller all tilgjengelig bredde i sin overordnede boks. Elementer som div, p og h1 er block som standard. Selv om du skriver en kort setning i et avsnitt, strekker boksen seg fra venstre til høyre kant. Det er ikke innholdet som bestemmer bredden, men display-verdien.
Du kan endre bredde og høyde på block-elementer med width og height. Sett du bredden til 500 piksler, begrenses boksen til det. Innholdet tilpasser seg. Men vær forsiktig med å definere både bredde og høyde samtidig. Da får du en absolutt størrelse, og hvis innholdet er for stort, flyter det utenfor boksen. CSS-egenskapen overflow lar deg styre hva som skjer med slikt innhold. Verdien auto legger til scrollbar bare når det trengs, og er som regel det tryggeste valget.
Inline-elementer flyter med teksten
Et inline-element begynner ikke på ny linje. Det legger seg ved siden av annet innhold, akkurat som et ord i en setning. Elementer som a, strong og span er inline som standard. Boksen er bare så bred som innholdet, og den bryter ikke flyten.
Den store forskjellen er at width og height ikke har noen effekt på inline-elementer. Du kan definere dem i CSS-en din, men nettleseren ignorerer verdiene fullstendig. Det er en vanlig kilde til frustrasjon for nybegynnere som prøver å gi en lenke en bestemt størrelse.
Padding og margin oppfører seg ulikt
Block-elementer respekterer padding og margin i alle retninger. Legger du til 10 piksler padding, får du luft på alle fire sider, og omkringliggende innhold skyves bort.
Inline-elementer er mer begrenset. Horisontal padding og margin fungerer som forventet og skyver innhold til venstre og høyre. Men vertikal padding og margin oppfører seg annerledes. Verdiene legges til visuelt, men de skyver ikke bort innhold over eller under. Boksen kan til og med overlappe elementer i linjene rundt. Dette er kanskje det mest overraskende ved inline-elementer, og noe du bare må prøve selv for å virkelig forstå.
Sjekk display-verdien i utviklerverktøyet
Når noe i layouten din ikke oppfører seg som du forventer, er utviklerverktøyet i nettleseren det raskeste stedet å feilsøke. Høyreklikk på elementet, velg "Inspect", og se etter display-verdien i CSS-panelet. Der ser du umiddelbart om elementet er block eller inline. Denne vanen sparer deg for mye gjetting.
Endre display-verdi med CSS
Du er ikke låst til standardverdien. Med display-egenskapen kan du gjøre et inline-element om til block, eller omvendt. Vil du at en lenke skal oppføre seg som et block-element med full kontroll over bredde og høyde, setter du display: block. Det finnes også en mellomting som heter inline-block, som gir deg det beste fra begge verdener: elementet flyter med teksten, men du kan likevel sette bredde, høyde og vertikal padding.
Lær mer om block og inline i CSS med video
Denne artikkelen bygger på en videoleksjon fra CSS-kurset på Utdannet.no. I kurset ser du en praktisk demonstrasjon der block- og inline-elementer sammenlignes visuelt, og du lærer:
- Hvordan du bruker border til å synliggjøre boksene på en nettside
- Hva som skjer når du setter bredde og høyde på begge typer elementer
- Hvordan boksmodellen bygger videre på konseptene block og inline
Du kan lese mer om display-verdier i MDN sin dokumentasjon om CSS display.
