Boxy a medzery · Programuj s Martinom

Objav najväčšie tajomstvo CSS: všetko na stránke je box. A nauč sa ich posúvať.

Ukážem ti: všetko je box

Tu je najväčšie tajomstvo webového dizajnu: každá vec na stránke je obdĺžnikový box. Nadpis, odstavec, obrázok, menu – všetko. Keď sa to naučíš vidieť, celé CSS ti začne dávať zmysel.

Každý box má tri druhy priestoru okolo seba:

        margin (vonkajší priestor)
      ┌─────────────────────────┐
      │  border (rám)           │
      │  ┌───────────────────┐  │
      │  │ padding (vankúš)  │  │
      │  │  ┌─────────────┐  │  │
      │  │  │   CONTENT   │  │  │
      │  │  └─────────────┘  │  │
      │  └───────────────────┘  │
      └─────────────────────────┘

padding – vankúš: priestor medzi obsahom a rámom (vnútri boxu)
border – rám boxu
margin – priestor medzi boxom a susedmi (vonku boxu)

.card {
  padding: 16px;        /* vankúš zo všetkých strán */
  border: 2px solid gray;
  margin: 20px 0;       /* 20px hore a dole, 0 na stranách */
  border-radius: 12px;
}

Ukážem ti: stránka ako ju stavajú profesionáli

Toto si videl na skutočných weboch – obsah nie je natiahnutý cez celú širokú obrazovku, zostáva v pohodlnom stĺpci uprostred. Tri riadky CSS to spravia:

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

margin: 0 auto je magický vzorec: nula hore a dole, „automaticky rovnako” na stranách – teda vycentrované. Takmer každá webová stránka na svete používa toto pravidlo.

A skroťme aj obrázky, aby nikdy nevytekli zo stránky:

img {
  max-width: 100%;      /* nikdy nie širší ako stĺpec */
  height: auto;         /* výška sa upraví sama, fotka sa neroztiahne */
  border-radius: 12px;  /* zaoblené rohy sa hodia ku každej fotke */
}

Teraz ty 💪

Táto úloha je rovnaká pre každý projekt – je to univerzálny outfit pre akýkoľvek web:

Vycentruj obsah: pravidlo max-width + margin: 0 auto na main.
Skroť obrázky pravidlom img z príkladu.
Vylepši svoju bublinku z minulej lekcie: pridaj margin, aby mala priestor na dýchanie.
Nech stránka dýcha: pridaj body { line-height: 1.6; } – riadky textu sa pekne rozložia.

Kompletné riešenie (funguje pre každý projekt)

Pridaj toto do 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;
}

A do svojej bublinky (tvoja sa môže volať .news, .favorite, .tip alebo .win) pridaj tento riadok:

  margin: 20px 0;

💡

Skús boxy spraviť viditeľné! Pridaj na chvíľu do CSS toto pravidlo: * { border: 1px solid red; } – hviezdička znamená „úplne všetko”. Zrazu uvidíš každý box na stránke. Potom to zase zmaž, ale pamätaj si ten pohľad: takto prehliadač vidí tvoju stránku.

✅

Skontroluj sa: Tvoj obsah sedí v pohodlnom vycentrovanom stĺpci, fotky majú zaoblené rohy a nikam nevytekajú, text sa dobre číta. Zmenši okno prehliadača – obsah sa prispôsobí. Tvoja webová stránka zrazu vyzerá o triedu lepšie.

Čo si z tejto lekcie odnášaš

Všetko na stránke je box s padding (vnútri), border (rám) a margin (vonku).
max-width + margin: 0 auto = vycentrovaný stĺpec obsahu, ako na skutočných weboch.
img { max-width: 100%; } – fotky nikdy nevytekajú.