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

Fyra lager

Content

Content
innehållPadding
inre luftBorder
kantlinjeMargin
yttre avstånd

Content

Själva innehållet

Content kan vara text, en bild eller andra element.

.card {
  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.

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;
}

Bilden kan skalas ned men behåller sina proportioner.

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.