Modul 3 · Kapitel 3.3

Boxmodellen i praktiken

Varje synligt element tar plats. Boxmodellen visar hur platsen räknas.

Mål

Efter kapitlet ska du kunna...

förklara content, padding, border och margin
jämföra content-box och border-box
skilja mellan block och inline
använda grundregler för bilder

Boxmodellen

Läs utifrån och in

Margin yttre avstånd

Border kantlinje

Padding inre luft

Content text, bild eller element

Kom ihåg: padding är innanför kanten · margin är utanför kanten.

Content

Själva innehållet

Content kan vara text, en bild eller andra element.

article {
  width: 220px;
}

Hur bredden räknas beror på elementets box-sizing.

Padding

Luft innanför kanten

.card {
  padding: 1rem;
}

Padding skapar avstånd mellan innehållet och elementets border.

Border

Kantlinjen runt elementet

.card {
  border: 1px solid #5eead4;
}

Värdena anger tjocklek, linjetyp och färg.

Margin

Avstånd till andra element

.card {
  margin-bottom: 1rem;
}

Margin ligger utanför border och skapar yttre avstånd.

content-box

Padding och border läggs ovanpå

.box {
  box-sizing: content-box;
  width: 220px;
  padding: 24px;
  border: 8px solid;
}

Synlig bredd: 220 + 48 + 16 = 284px.

border-box

Padding och border ingår

.box {
  box-sizing: border-box;
  width: 220px;
  padding: 24px;
  border: 8px solid;
}

Den synliga boxens bredd stannar på 220px.

Interaktiv boxmodell

Ändra alla delar

Width: 220px

Padding: 24px

Border: 8px

Margin: 24px

content-boxborder-box

Content

Global regel

Använd border-box överallt

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

Det gör elementens totalbredd mer förutsägbar.

Maxbredd och centrering

Begränsa bredden och fördela sidutrymmet

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

max-width sätter en övre gräns.
margin: 0 auto centrerar blocket i sidled.
padding: 2rem ger lika mycket inre luft på alla sidor.

Block och inline

Två olika beteenden

Block	Inline
Börjar normalt på ny rad.	Ligger kvar i textflödet.
`p`, `h1`, `div`	`a`, `span`, `strong`

Webbläsarexempel

Block och inline i praktiken

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

Generella behållare

div

Generell blockbehållare.

span

Generell inline-behållare.

Välj ett semantiskt element när ett sådant passar bättre.

CSS reset

Ta kontroll över standardbeteenden

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

Responsiva bilder

Förhindra att bilden spräcker layouten

img {
  display: block;
  max-width: 100%;
  height: auto;
}

display: block tar bort bildens textbaslinjeutrymme.
max-width: 100% begränsar bilden till behållaren.
height: auto behåller proportionerna.

Kontrollfråga

Var finns padding?

Ligger padding innanför eller utanför border?

Svar: innanför. Padding skapar luft mellan content och border.

Sammanfattning

Kom ihåg

Content omges av padding, border och margin.
Border-box gör totalbredden lättare att kontrollera.
Block börjar normalt på ny rad; inline ligger i textflödet.
div och span är generella behållare.
Responsiva bildregler skyddar layouten.