Bokse og afstande · Kode med Martin

Opdag den største hemmelighed i CSS: alt på en side er en boks. Og lær at flytte dem rundt.

Jeg viser deg: alt er en boks

Her er den største hemmelighed i webdesign: hver eneste ting på en side er en rektangulær boks. En overskrift, et avsnitt, et bilde, en menu – det hele. Når du lærer at se det, falder al CSS på plads.

Hver boks har tre slags plads omkring sig:

        margin (outer space)
      ┌─────────────────────────┐
      │  border (frame)         │
      │  ┌───────────────────┐  │
      │  │ padding (cushion) │  │
      │  │  ┌─────────────┐  │  │
      │  │  │   CONTENT   │  │  │
      │  │  └─────────────┘  │  │
      │  └───────────────────┘  │
      └─────────────────────────┘

padding – puden: plads mellom indholdet og rammen (inde i boksen)
border – boksens ramme
margin – plads mellom boksen og dens naboer (uden for boksen)

.card {
  padding: 16px;        /* cushion on all sides */
  border: 2px solid gray;
  margin: 20px 0;       /* 20px top and bottom, 0 on the sides */
  border-radius: 12px;
}

Jeg viser deg: en side som profesjonelle bygger den

Du har set det på rigtige nettsider – indholdet er ikke strakt over hele den brede skjerm, det forblir i en behagelig kolonne i midten. Tre linjer CSS gjør det:

main {
  max-width: 700px;   /* content will never be wider than 700px */
  margin: 0 auto;     /* auto on the sides = center it */
  padding: 0 16px;     /* on mobile, text won't be glued to the edge */
}

margin: 0 auto er en magisk formel: nul øverst og nederst, “automatisk ens” på siderne – dvs. centreret. Næsten hver nettside i verden bruker denne regel.

Og la oss også tæmme bilder, så de aldrig flyder ud af siden:

img {
  max-width: 100%;      /* never wider than the column */
  height: auto;         /* height adjusts automatically, so the photo doesn't squish */
  border-radius: 12px;  /* rounded corners suit every photo */
}

Nå er det din tur 💪

Denne opgave er den samme for hvert projekt – det er et universelt outfit til hver nettside:

Centrer ditt indhold: reglen max-width + margin: 0 auto på main.
Tæm dine bilder med img-reglen fra eksemplet.
Forbedr ditt badge fra siste leksjon: legg til margin, så det har lidt luft.
La siden ånde: legg til body { line-height: 1.6; } – tekstlinjer spreder sig pænt.

Komplet løsning (fungerer for hvert projekt)

Legg til dette til style.css:

body {
  line-height: 1.6;
}

main {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 16px;
}

img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

Og til ditt badge (ditt heter måske .news, .favorite, .tip eller .win), legg til denne linje:

  margin: 20px 0;

💡

Prøv at gjøre boksene synlige! Legg til denne regel til din CSS et øyeblikk: * { border: 1px solid red; } – stjernen betyder “absolut alt”. Plutselig ser du hver boks på siden. Slet den så igen, men husk det syn: sådan ser nettleseren siden din.

✅

Sjekk deg selv: Ditt indhold sidder i en behagelig centreret kolonne, bilder har afrundede hjørner og flyder ikke ud nogen steder, teksten er let at lese. Gjør ditt nettleservindue mindre – indholdet tilpasser sig. Din nettside ser plutselig en klasse bedre ud.

Dette tar du med deg fra leksjonen

Alt på en side er en boks med padding (inde), border (ramme) og margin (ude).
max-width + margin: 0 auto = en centreret indholdskolonne, som rigtige nettsider.
img { max-width: 100%; } – bilder flyder aldrig ud.