Laatikot ja välit · Koodaa Martinin kanssa

Löydä CSS:n suurin salaisuus: kaikki sivulla on laatikko. Ja opi siirtämään niitä.

Näytän sinulle: kaikki on laatikko

Tässä on verkkosuunnittelun suurin salaisuus: jokainen asia sivulla on suorakulmainen laatikko. Otsikko, kappale, kuva, valikko – kaikki. Kun opit näkemään sen, koko CSS selkeytyy.

Jokaisella laatikolla on kolme erilaista tilaa ympärillään:

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

padding – tyyny: tila sisällön ja reunan välissä (laatikon sisällä)
border – laatikon kehys
margin – tila laatikon ja naapureiden välissä (laatikon ulkopuolella)

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

Näytän sinulle: sivu kuten ammattilaiset rakentavat

Olet nähnyt tämän oikeilla verkkosivuilla – sisältö ei veny koko leveälle näytölle, vaan pysyy mukavassa keskisarakkeessa. Kolme riviä CSS:ää tekee sen:

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 on taikakaava: nolla ylhäällä ja alhaalla, “automaattisesti yhtä paljon” sivuilla – eli keskellä. Lähes jokainen verkkosivu maailmassa käyttää tätä sääntöä.

Ja kesytetään kuvatkin, etteivät ne koskaan valu sivun ulkopuolelle:

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

Nyt sinun vuorosi 💪

Tämä tehtävä on sama jokaiselle projektille – se on yleispuku mille tahansa verkkosivulle:

Keskitä sisältösi: max-width + margin: 0 auto -sääntö main:lle.
Kesytä kuvat esimerkin img-säännöllä.
Paranna edellisen oppitunnin merkkiäsi: lisää margin, jotta sillä on hengitystilaa.
Anna sivun hengittää: lisää body { line-height: 1.6; } – tekstirivit leviävät mukavasti.

Täydellinen ratkaisu (toimii jokaiselle projektille)

Lisää tämä style.css:ään:

body {
  line-height: 1.6;
}

main {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 16px;
}

img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

Ja merkkiisi (sinun saattaa olla .news, .favorite, .tip tai .win), lisää tämä rivi:

  margin: 20px 0;

💡

Kokeile tehdä laatikot näkyviksi! Lisää CSS:ääsi hetkeksi tämä sääntö: * { border: 1px solid red; } – tähti tarkoittaa “ihan kaikkea”. Yhtäkkiä näet jokaisen laatikon sivulla. Poista se sitten, mutta muista tuo näkymä: näin selain näkee sivusi.

✅

Tarkista itse: Sisältösi istuu mukavassa keskisarakkeessa, kuvilla on pyöristetyt kulmat eivätkä ne valu minnekään, teksti on helppo lukea. Pienennä selainikkunaa – sisältö mukautuu. Verkkosivusi näyttää yhtäkkiä luokkaa paremmalta.

Mitä opit tästä oppitunnista

Kaikki sivulla on laatikko, jolla on padding (sisällä), border (kehys) ja margin (ulkopuolella).
max-width + margin: 0 auto = keskitetty sisältösarake, aivan kuin oikeilla verkkosivuilla.
img { max-width: 100%; } – kuvat eivät koskaan valu ulos.