Bokse og afstande · Kod med Martin

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

Vis mig: 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 afsnit, et billede, 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 mellem indholdet og rammen (inde i boksen)
border – boksens ramme
margin – plads mellem 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;
}

Vis mig: en side som professionelle bygger den

Du har set det på rigtige hjemmesider – indholdet er ikke strakt over hele den brede skærm, det forbliver i en behagelig kolonne i midten. Tre linjer CSS gø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 enhver hjemmeside i verden bruger denne regel.

Og lad os også tæmme billeder, 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 */
}

Nu er det din tur 💪

Denne opgave er den samme for hvert projekt – det er et universelt outfit til enhver hjemmeside:

Centrer dit indhold: reglen max-width + margin: 0 auto på main.
Tæm dine billeder med img-reglen fra eksemplet.
Forbedr dit badge fra sidste lektion: tilføj margin, så det har lidt luft.
Lad siden ånde: tilføj body { line-height: 1.6; } – tekstlinjer spreder sig pænt.

Komplet løsning (virker for hvert projekt)

Tilføj 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 dit badge (dit hedder måske .news, .favorite, .tip eller .win), tilføj denne linje:

  margin: 20px 0;

💡

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

✅

Tjek dig selv: Dit indhold sidder i en behagelig centreret kolonne, fotos har afrundede hjørner og flyder ikke ud nogen steder, teksten er let at læse. Gør dit browservindue mindre – indholdet tilpasser sig. Din hjemmeside ser pludselig en klasse bedre ud.

Det tager du med fra denne lektion

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