Boxmodellen

Alla element är lådor

Webbläsaren renderar allt som rektangulära lådor. Text är en låda. Bilder är lådor. Din <nav> är en låda. Det spelar ingen roll hur det ser ut visuellt. Under huven är allt boxar.

Om du inte förstår hur webbläsaren räknar ut storleken på de lådorna, kommer du att slåss med CSS i månader utan att förstå varför saker inte hamnar rätt.

Tänk på ett brev i ett kuvert. Brevet är content. Stoppningen inne i kuvertet är padding. Kuvertkanten är border. Avståndet till nästa brev i högen är margin.

Boxmodellen beskriver de fyra lagren som bygger upp varje element:

• content är innehållet: texten, bilden, det som faktiskt syns.
• padding är utrymmet innanför bordern, mellan innehållet och kanten.
• border är den synliga (eller osynliga) kanten runt elementet.
• margin är utrymmet utanför bordern, som knuffar undan omgivande element.

Fällan: box-sizing

Här är det som ställer till det för många.

.box {
    width: 200px;
    padding: 20px;
    border: 5px solid black;
}

Hur bred är .box?

Svaret är 250px. Inte 200. Webbläsaren adderar padding och border utanpå den deklarerade bredden: 200 + 20 + 20 + 5 + 5 = 250.

Det är standardbeteendet (box-sizing: content-box) och det ställer ofta till det innan du har lärt dig hur det fungerar. Du lägger till padding på en knapp, och plötsligt är den för bred för sin container. Du lägger till en border på en bild, och den spränger layouten. Du får inga felmeddelanden. Det bara slutar funka som du vill.

Lösningen är box-sizing: border-box. Med det räknas padding och border in i den deklarerade bredden. .box stannar på 200px, och paddingen äter in i utrymmet istället. Det äter sig alltså inåt, inte utåt.

*,
*::before,
*::after {
    box-sizing: border-box;
}

Detta är inte en åsikt, det är en industristandard. Alla moderna CSS-ramverk inkluderar den här regeln.

Lägg märke till formen på regeln: några rader som skriver över webbläsarens standardbeteende. Det är i själva verket din första reset. I nästa del tittar vi närmare på hela idén bakom att nollställa webbläsarens stilar.

Pröva i DevTools: Se lådan live

Högerklicka på valfritt element på en webbsida och välj Inspektera.

1. Titta i panelen längst ner till höger under fliken Computed.
2. Där ser du ett färgkodat diagram över Boxmodellen. Hovra över de olika lagren.
3. Webbläsaren markerar nu exakt motsvarande yta på skärmen: blå för content, grön för padding, gul för border, orange för margin.
4. Hitta ett element på sidan och kontrollera om det använder box-sizing: border-box eller content-box. Scrolla ned i Computed-listan för att se det.