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 delar

De flesta HTML-element kan förstås som en box.

  • Content: själva innehållet, till exempel texten.
  • Padding: luft mellan innehåll och kantlinje.
  • Border: kantlinjen runt elementet.
  • Margin: avståndet till andra element.
.card {
    padding: 1rem;
    border: 1px solid #5eead4;
    margin-bottom: 1rem;
}

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

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

object-fit kan styra hur en bild fyller en bestämd yta. cover fyller ytan men kan beskära bilden. contain visar hela bilden men kan lämna tomrum.