Rutor och avstånd · Koda med Martin

Upptäck den största hemligheten i CSS: allt på en sida är en ruta. Och lär dig flytta runt dem.

Jag visar: allt är en ruta

Här är den största hemligheten inom webbdesign: varje enda sak på en sida är en rektangulär ruta. En rubrik, ett stycke, en bild, en meny – allt. När du lär dig se det faller all CSS på plats.

Varje ruta har tre slags utrymme runt sig:

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

padding – kudden: utrymme mellan innehållet och ramen (inuti rutan)
border – rutans ram
margin – utrymme mellan rutan och grannarna (utanför rutan)

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

Jag visar: en sida som proffsen bygger

Du har sett det på riktiga webbplatser – innehållet sträcks inte över hela den breda skärmen, det stannar i en bekväm kolumn i mitten. Tre rader 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 är en magisk formel: noll upp och ner, “automatiskt lika” på sidorna – alltså centrerat. Nästan varje webbplats i världen använder den här regeln.

Och låt oss tämja bilder också, så de aldrig spillar utanför sidan:

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 är det din tur 💪

Den här uppgiften är samma för varje projekt – det är en universell outfit för vilken webbplats som helst:

Centrera ditt innehåll: regeln max-width + margin: 0 auto på main.
Tämj dina bilder med img-regeln från exemplet.
Förbättra din bricka från förra lektionen: lägg till margin så den får lite andningsrum.
Låt sidan andas: lägg till body { line-height: 1.6; } – textrader sprids ut snyggt.

Komplett lösning (fungerar för varje projekt)

Lägg till det här i 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;
}

Och till din bricka (din kanske heter .news, .favorite, .tip eller .win), lägg till den här raden:

  margin: 20px 0;

💡

Prova att göra rutorna synliga! Lägg till den här regeln i din CSS för ett ögonblick: * { border: 1px solid red; } – asterisken betyder “absolut allt”. Plötsligt ser du varje ruta på sidan. Ta bort den igen, men kom ihåg den vyn: så ser webbläsaren din sida.

✅

Kolla själv: Ditt innehåll sitter i en bekväm centrerad kolumn, foton har rundade hörn och spillar inte ut någonstans, texten är lätt att läsa. Krymp webbläsarfönstret – innehållet anpassar sig. Din webbplats ser plötsligt en klass bättre ut.

Det här tar du med dig från lektionen

Allt på en sida är en ruta med padding (inuti), border (ram) och margin (utanför).
max-width + margin: 0 auto = en centrerad innehållskolumn, precis som riktiga webbplatser.
img { max-width: 100%; } – foton spillar aldrig ut.