CSS Box Model – En CSS “Need to know”

Er man ny til CSS eller man nogle gange undrer sig over hvorfor ens <div> elementer ikke fylder det man har angivet dem til, så kan det være en god ide lige at lære eller få genopfrisket CSS Box Model eller CSS boks modellen.

Jep, lidt teori og hvorfor nu det? Jo, alle HTML elementer har nemlig den egenskab at de er defineret som bokse. Prøv at sætte en border rundt om alle dine HTML elementer vha. f.eks.:

* {
   border: 1px solid orange !important;
   /* !important overskriver border på elementer der har en
      i forvejen */
}

Resultatet af ovenstående på CSS-siden.dk vil se sådan her ud – Bokse ud over det hele.

Ok, så alle HTML elementer er bokse, hvad bruges CSS boks modellen så til? Jo, den fortæller hvordan margin, border, padding, height og width påvirker de enkelte bokse. CSS boks modellen:

En oversigt over hvordan CSS box modellen virker

Ret simpelt ik? Det er det faktisk også, og her er lige en kort forklaring af de enkelte begreber:

Padding
– Tilføjer afstand fra indhold til border.
Border
– Laver rammer om indholdet inkl. padding
Margin
– Angiver ‘luften’ omkring hele elementet.

Dvs. højden og bredden af det enkelte HTML element bliver påvirket af indholdet i boksen, samt padding og border:

Bredden = width + padding (left og right) + border (left og right)
Højden = height + padding (top og bottom) + border (top og bottom)

Og så er det hvis tid til at vise det med et rigtigt eksempel, først HTML’en:

<div class="boks-1">
   En 180 pixels bred og 90 pixels høj boks.
</div>
<div class="boks-2">
   En 180 pixels bred og 90 pixels høj boks igen.
</div>

Lige ud af landevejen, to div elementer med hver sin class tilknyttet. Begge kasser skal være 180px brede, 90px høje, og der skal være 20px margin på dem også, så man får følgende:

2 bokse med samme bredde, men forskellig angivet width

To gode kasser, helt CSS naturlige.

Og CSS’en til vores HTML:

.boks-1 {
   width: 150px;
   height: 60px;
   margin: 20px;
   padding: 10px;
   border: 5px solid #536ba;
}
.boks-2 {
   width: 160px;
   height: 70px;
   margin: 20px;
   padding: 10px;
}

Boksene skulle være 180px bredde, så hvorfor er der sat en width på 150px til boks-1 og 160px til boks-2? Boks-1 har en border på 5px, dvs. 5px på alle siderne og derfor 5px på højre og 5px på venstre sidde, så der ligges 10px til bredden. Udover border er der så yderligere en padding på 10px på alle sider, og ligesom border, så ligges den til for venstre og højre side og så har vi ialt: 10px (border) + 20px (padding) + 150px (width) = 180px.

Boks-2 har ingen border, så derfor er width til den sat til 160px.

Se demo

Bemærkning til Internet Explorer

Der er chance for at CSS boks modellen måske ikke helt opfører sig som ovenstående når man bruger IE – det kan skyldes at browseren kører i quirkmode, eller med andre ord, kører i en mode der gør at den viser hjemmesider som IE version 5.5 ville have gjort det.

Løsning: Sørg for at der altid er en ordentlig DOCTYPE på hjemmesiden.

Værktøjer til at vise boks modellen

Der findes lidt redskaber der gør livet lidt nemmere for webudvikleren i dag, og de er ikke længere væk end at de indbyggede i browserne eller kan installeres dertil.

Safari og Chrome

Disse kommer med et indbygget værktøj til at vise CSS attributer på de enkelte html elementer. Vælg et sted på siden, højreklik og vælg inspect/inspicer element. Ovre i højre side kan man så scrolle ned indtil man når Metrics:

Safari og Chromes layout viewer viser en boks med margin, padding værdier mm.

Her kan man se pixel værdierne på margin osv. og man kan også ændre værdier direkte i boksen – pretty neat!

Firefox

Firefox er ikke leveret med samme værktøj som Safari og Chrome, men heldigvis er der lavet et addon til den – Firebug

Modsat Safari og Chrome er firebugs box viewer noget simplere at finde – bare klik på layout fanen når firebug er aktiv og voila:
Firebugs layout viewer hvor man kan se html elementets margin, padding osv.

Internet Explorer

Jeg kender ikke rigtig til IE’s udviklerværktøj, men jeg tror nu nok at den også kan vise noget af det samme som de andre browsere?

Afsluttende bemærkning

Det virker måske ikke super intuitivt at den width man angiver ikke er den egentlige bredde på sine HTML elementer, men sådan er standarden og det er måske en god måde at huske CSS Box Modellen på – “Width er ikke den endelige bredde, når der bruges padding og border”.

Smid en kommentar

Felter markeret med * skal udfyldes og din e-mail-adresse vil ikke blive offentliggjort.