Du har lagt to lenker etter hverandre i HTML-koden, og de havner pent ved siden av hverandre på siden. Så legger du til to overskrifter, og plutselig står de på hver sin linje, selv om det er plass til begge på samme rad. Forskjellen har ingenting med innholdet å gjøre. Den skyldes at HTML-elementer har en innebygd displayverdi: enten block eller inline. Denne egenskapen styrer hvordan elementet oppfører seg i layouten, og å forstå skillet mellom block vs inline i HTML er nøkkelen til å forstå hvorfor elementer plasserer seg som de gjør.
Block-elementer: ny linje og full bredde
Et block-element starter alltid på en ny linje. Det tar hele den tilgjengelige bredden, uansett hvor lite innhold det har. En overskrift med bare ett ord strekker seg likevel fra venstre til høyre kant av foreldreelementet. Det er slik block-elementer oppfører seg som standard.
Typiske block-elementer er <h1> til <h6>, <p>, <div>, <ul>, <ol> og <li>. Alle disse tar full bredde og dytter neste element ned på en ny linje. Selv om en paragraf bare inneholder tre ord, opptar den hele raden.
Grunnen til at block-elementer tar full bredde er at de er ment for å bygge opp sidenes vertikale struktur. Overskrifter, avsnitt og lister er innholdsseksjoner som naturlig stables oppå hverandre. Du kan se det selv: hvis du høyreklikker på en overskrift i nettleseren og velger Inspiser (eller trykker F12), vil du se at elementet er markert med en farget boks som strekker seg over hele bredden.
Inline-elementer: bare den plassen de trenger
Inline-elementer starter ikke på en ny linje. De tar bare den bredden innholdet krever, og andre inline-elementer kan stå rett ved siden av dem på samme rad. Tenk på inline-elementer som ord i en setning. De flyter naturlig etter hverandre.
Typiske inline-elementer er <a>, <strong>, <em>, <span> og <img>. En lenke midt i et avsnitt bryter ikke teksten ned på en ny linje. Den flyter med resten av teksten som om den var et vanlig ord.
Legger du tre lenker etter hverandre i koden, havner de side om side i nettleseren. Legger du tre overskrifter etter hverandre, står de på tre separate linjer. Det er hele forskjellen mellom inline og block i praksis.
Se forskjellen med DevTools
Den raskeste måten å se block vs inline i HTML i aksjon er å bruke nettleserens utviklerverktøy. Høyreklikk på et element og velg Inspiser. I Chrome DevTools kan du se elementets display-verdi under "Computed"-fanen.
Prøv å klikke på en overskrift. Du ser at den har display: block og at den blå markeringen strekker seg over hele bredden, selv om teksten bare dekker en brøkdel. Klikk deretter på en lenke inne i et avsnitt. Den har display: inline, og markeringen dekker bare ordene i lenken.
Du kan til og med endre displayverdien direkte i DevTools for å se hva som skjer. Endre en lenke fra inline til block, og den hopper plutselig ned på en egen linje og tar full bredde. Endre en overskrift fra block til inline, og den krymper til å bare dekke teksten, med plass til andre elementer på samme rad. Endringene er midlertidige og forsvinner når du oppdaterer siden.
Bilder: inline, men oppfører seg annerledes
Bildeelementet <img> er teknisk sett et inline-element. Det starter ikke på en ny linje, og to bilder etter hverandre legger seg side om side. Men img har en egenskap de fleste inline-elementer mangler: du kan sette bredde og høyde på det. Vanlige inline-elementer som <a> og <strong> ignorerer width og height.
Denne oppførselen gjør img til det som kalles et "replaced element". Nettleseren erstatter elementet med eksternt innhold (bildefilen), og det trenger derfor eksplisitte dimensjoner. I praksis betyr dette at img flyter med teksten som et inline-element, men opptar en definert plass som et block-element. Endrer du display til block i DevTools, tar bildet plutselig hele bredden og starter på en ny linje.
Hvorfor dette er viktig for layouten din
Mange nybegynnere prøver å plassere elementer ved siden av hverandre ved å fjerne linjeskift i koden. Det fungerer ikke. Linjeskift i HTML-koden påvirker ikke layouten. Det som bestemmer om to elementer står ved siden av hverandre eller under hverandre, er om de er block eller inline.
Forstår du dette prinsippet, slipper du mye frustrasjon. Når en lenke ikke havner der du forventer, sjekk om den har fått display: block. Når to elementer ikke legger seg ved siden av hverandre, sjekk om de er block-elementer. Displayverdien er nesten alltid forklaringen.
Med CSS kan du endre displayverdien til hva du vil. Du kan gjøre en lenke til et block-element, eller en overskrift til et inline-element. CSS gir deg også display: inline-block og display: flex som åpner for mer avanserte layouter. Men alt bygger på det samme grunnlaget: block tar full bredde og starter ny linje, inline tar bare den plassen innholdet krever.
Neste steg
Du forstår nå forskjellen mellom block og inline, som er grunnlaget for all layout i HTML. For å lære mer om hvordan du strukturerer tekst med overskrifter, avsnitt og lister, kan du gå videre til Tekst og lenker i HTML. Vil du se hvordan bilder og andre mediaelementer brukes i praksis, finner du det under Media og tabeller.
Denne artikkelen bygger på en videoleksjon fra HTML-kurset på Utdannet.no. I kurset lærer du også CSS-display-egenskapene som bygger videre på block og inline, pluss flexbox og grid for moderne, fleksible layouter.
