← Úroveň 1 – Stavitel

Lekce 8 z 12 ⏱ 30 minut

Krabice a mezery

Odhalíš největší tajemství CSS: všechno na stránce je krabice. A naučíš se s nimi hýbat.

Ukaž mi to: všechno je krabice

Tady je největší tajemství webdesignu: každá věc na stránce je obdélníková krabice. Nadpis, odstavec, obrázek, menu – všechno. Když se to naučíš vidět, pochopíš celé CSS.

Každá krabice má tři druhy prostoru okolo:

        margin (vnější mezera)
      ┌─────────────────────────┐
      │  border (rámeček)       │
      │  ┌───────────────────┐  │
      │  │ padding (vycpávka)│  │
      │  │  ┌─────────────┐  │  │
      │  │  │   OBSAH     │  │  │
      │  │  └─────────────┘  │  │
      │  └───────────────────┘  │
      └─────────────────────────┘
.karta {
  padding: 16px;        /* vycpávka ze všech stran */
  border: 2px solid gray;
  margin: 20px 0;       /* 20px nahoře a dole, 0 po stranách */
  border-radius: 12px;
}

Ukaž mi to: stránka jako u profíků

Znáš to z opravdových webů – obsah není roztažený přes celou širokou obrazovku, ale drží se v pohodlném sloupci uprostřed. To udělají tři řádky:

main {
  max-width: 700px;   /* obsah nebude nikdy širší než 700px */
  margin: 0 auto;     /* auto po stranách = vycentruj */
  padding: 0 16px;    /* na mobilu nebude text nalepený na kraj */
}

margin: 0 auto je kouzelná formule: nahoře a dole nula, po stranách „automaticky stejně” – tedy na středu. Tohle pravidlo má skoro každý web na světě.

A ještě zkrotíme obrázky, aby nikdy nevytekly ze stránky:

img {
  max-width: 100%;      /* nikdy širší než sloupec */
  height: auto;         /* výška se dopočítá, ať se fotka nerozplácne */
  border-radius: 12px;  /* kulaté rohy sluší každé fotce */
}

Teď ty 💪

Tenhle úkol je pro všechny projekty stejný – je to univerzální kostým každého webu:

  1. Vycentruj obsah: pravidlo max-width + margin: 0 auto na main.
  2. Zkroť obrázky pravidlem img z ukázky.
  3. Vylepši svoji cedulku z minulé lekce: přidej jí margin, ať má kolem sebe vzduch.
  4. Dej stránce dýchat: přidej body { line-height: 1.6; } – řádky textu se pěkně rozestoupí.
Hotové řešení (funguje pro všechny projekty)

Přidej do styl.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;
}

A svojí cedulce (jmenuje se u tebe třeba .aktualita, .oblibene, .tip nebo .vyhra) přidej řádek:

  margin: 20px 0;
💡

Zkus si krabice zviditelnit! Přidej na chvíli do CSS pravidlo * { border: 1px solid red; } – hvězdička znamená „úplně všechno”. Najednou uvidíš každou krabici na stránce. Pak to zase smaž, ale ten pohled si zapamatuj: takhle vidí stránku prohlížeč.

✅

Kontrola: Obsah je v pohodlném sloupci uprostřed, fotky mají kulaté rohy a nikam nepřetékají, text se dobře čte. Zmenši okno prohlížeče – obsah se přizpůsobí. Tvůj web najednou vypadá o třídu líp.

Co si z téhle lekce odnést

© 2026 Ing. Martin Polak / AlgoRhino · Podmínky užití obsahu