Modul 3

Kap 3.3 - Boxmodellen i praktiken

Varje synligt element tar plats. Boxmodellen hjälper dig förstå och styra den platsen.

Mål

  • Förstå content, padding, border och margin.
  • Skilja mellan block och inline.
  • Använda box-sizing: border-box och grundregler för bilder.

Boxmodellens fyra lager

De flesta HTML-element kan förstås som rektangulära boxar. Läs modellen utifrån och in: margin → border → padding → content.

Content ligger i mitten. Padding och border hör till elementets synliga box, medan margin skapar utrymme utanför den.
  • Content: innehållet som elementet visar.
  • Padding: luft mellan content och border.
  • Border: kanten runt content och padding.
  • Margin: avstånd från boxen till andra element.

Från CSS till en riktig box

Här styr varje deklaration en egen del av kortet. Bakgrunden syns i content och padding, kantlinjen ramar in dem och margin håller andra element på avstånd.

.card {
    padding: 1rem;
    border: 4px solid #0f766e;
    margin: 1rem;
    background: white;
}
Ett kort

Texten har luft till kanten.

content-box och border-box

Som standard räknas bredden med content-box. Då läggs padding och border ovanpå den bredd du har satt. Det kan ge oväntade resultat. Därför använder många projekt:

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

Med border-box ingår padding och border i elementets totala bredd.

Interaktiv boxmodell

Ändra värdena och se hur margin, border, padding och width påverkar elementets totala plats. Slå också av och på border-box för att se skillnaden mot content-box.

Med border-box är den synliga boxens bredd 220px. Margin tar plats utanför boxen.

Content
.box {
  box-sizing: border-box;
  width: 220px;
  padding: 24px;
  border: 8px solid #5eead4;
  margin: 24px;
}

Maxbredd och centrering

width anger en bredd, medan max-width sätter en övre gräns. Ett element med maxbredd kan fortfarande bli smalare när skärmen är smal.

main {
    max-width: 70ch;
    margin: 0 auto;
    padding: 2rem;
}

I kortformen margin: 0 auto gäller det första värdet uppåt och nedåt. Det andra gäller vänster och höger. auto fördelar det lediga utrymmet lika på båda sidor och centrerar ett blockelement som har en begränsad bredd.

padding: 2rem använder ett värde för alla fyra sidor. Två värden betyder först uppåt och nedåt, sedan vänster och höger.

Block och inline

Blockelement börjar normalt på ny rad och tar tillgänglig bredd. Exempel: p, h1, div. Inline-element ligger i textflödet. Exempel: a, span, strong.

Så visas block och inline i webbläsaren

Blockelement

<h1> tar en egen rad
<p> börjar också på ny rad
<div> tar normalt hela tillgängliga bredden

Inline-element

I en mening kan en <span>, en <strong> och en länk ligga kvar i samma textflöde.

div och span

div är en generell blockbehållare. span är en generell inline-behållare. Använd semantiska element när de passar bättre, men div och span är användbara när du behöver gruppera för CSS.

CSS reset och bilder

Webbläsare har standardmarginaler och standardbeteenden. En enkel start kan vara:

* {
    box-sizing: border-box;
}

body {
    margin: 0;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}
  • display: block gör bilden till ett blockelement och tar bort det lilla utrymme som en bild annars kan få vid textens baslinje.
  • max-width: 100% hindrar bilden från att bli bredare än sin behållare.
  • height: auto låter höjden följa bredden så att bildens proportioner behålls.