Kutije i razmaci · Kodiraj s Martinom

Pokazat ću ti: sve je kutija

Evo najveće tajne web dizajna: svaka stvar na stranici je pravokutna kutija. Naslov, odlomak, slika, izbornik – sve. Kad naučiš to vidjeti, cijeli CSS ti postane jasan.

Svaka kutija ima tri vrste prostora oko sebe:

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

padding – jastuk: razmak između sadržaja i okvira (unutar kutije)
border – okvir kutije
margin – razmak između kutije i susjeda (izvan kutije)

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

Pokazat ću ti: stranica kao što je grade profesionalci

Vidio si ovo na pravim web stranicama – sadržaj nije rastegnut preko cijelog širokog ekrana, ostaje u ugodnom stupcu u sredini. Tri CSS retka to rade:

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 je čarobna formula: nula gore i dolje, “automatski jednako” sa strane – znači centrirano. Gotovo svaka web stranica na svijetu koristi ovo pravilo.

I ukrotimo slike, da nikad ne ispadnu iz stranice:

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 */
}

Sad si ti na redu 💪

Ovaj zadatak je isti za svaki projekt – to je univerzalna odjeća za bilo koju web stranicu:

Centriraj sadržaj: pravilo max-width + margin: 0 auto na main.
Ukroti slike pravilom img iz primjera.
Poboljšaj značku iz prošle lekcije: dodaj margin da ima malo prostora za disanje.
Neka stranica diše: dodaj body { line-height: 1.6; } – redovi teksta se lijepo razmaknu.

Potpuno rješenje (radi za svaki projekt)

Dodaj ovo u 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;
}

I svojoj znački (tvoja se možda zove .news, .favorite, .tip ili .win) dodaj ovaj redak:

  margin: 20px 0;

💡

Pokušaj učiniti kutije vidljivima! Dodaj ovo pravilo u CSS na trenutak: * { border: 1px solid red; } – zvjezdica znači “apsolutno sve”. Odjednom ćeš vidjeti svaku kutiju na stranici. Zatim obriši, ali zapamti taj pogled: tako preglednik vidi tvoju stranicu.

✅

Provjeri sam sebe: Tvoj sadržaj sjedi u ugodnom centriranom stupcu, fotografije imaju zaobljene kutove i ne ispadaju nikamo, tekst je lako čitljiv. Smanji prozor preglednika – sadržaj se prilagođava. Tvoja web stranica odjednom izgleda razinu bolje.

Što ćeš ponijeti iz ove lekcije

Sve na stranici je kutija s padding (unutra), border (okvir) i margin (izvana).
max-width + margin: 0 auto = centrirani stupac sadržaja, baš kao na pravim web stranicama.
img { max-width: 100%; } – fotografije nikad ne ispadaju.