Pudełka i odstępy · Koduj z Martinem

Odkryj największy sekret CSS: wszystko na stronie to pudełko. I naucz się je przesuwać.

Pokażę ci: wszystko to pudełko

Największy sekret projektowania stron: każda rzecz na stronie to prostokątne pudełko. Nagłówek, akapit, obrazek, menu – wszystko. Gdy nauczysz się tak patrzeć, cały CSS układa się w całość.

Każde pudełko ma trzy rodzaje przestrzeni wokół:

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

padding – wypełnienie: odstęp między treścią a ramką (wewnątrz pudełka)
border – ramka pudełka
margin – odstęp między pudełkiem a sąsiadami (na zewnątrz)

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

Pokażę ci: strona jak u profesjonalistów

Widziałeś to na prawdziwych stronach – treść nie rozciąga się na całą szeroką planszę, tylko zostaje w wygodnej kolumnie na środku. Trzy linie CSS to robią:

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 to magiczna formuła: zero góra-dół, „automatycznie równo” z boków – czyli wyśrodkowanie. Prawie każda strona na świecie używa tej reguły.

I poskrommy obrazki, żeby nigdy nie wychodziły poza stronę:

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

Teraz ty 💪

To zadanie jest takie samo dla wszystkich projektów – uniwersalny strój na każdą stronę:

Wyśrodkuj treść: reguła max-width + margin: 0 auto na main.
Poskrom obrazki regułą img z przykładu.
Ulepsz odznakę z poprzedniej lekcji: dodaj margin, żeby „oddychała”.
Niech strona oddycha: dodaj body { line-height: 1.6; } – linie tekstu się rozstąpią.

Pełne rozwiązanie (działa dla każdego projektu)

Dodaj to 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 odznaki (twoja może nazywać się .news, .favorite, .tip albo .win) dodaj:

  margin: 20px 0;

💡

Spróbuj zobaczyć pudełka! Dodaj na chwilę do CSS: * { border: 1px solid red; } – gwiazdka znaczy „absolutnie wszystko”. Nagle zobaczysz każde pudełko na stronie. Potem usuń, ale pamiętaj ten widok: tak przeglądarka widzi twoją stronę.

✅

Sprawdź się: Treść jest w wyśrodkowanej, wygodnej kolumnie, zdjęcia mają zaokrąglone rogi i nigdzie nie wystają, tekst czyta się łatwo. Zmniejsz okno przeglądarki – treść się dopasowuje. Twoja strona nagle wygląda o klasę lepiej.

Co wyniesiesz z tej lekcji

Wszystko na stronie to pudełko z padding (w środku), border (ramka) i margin (na zewnątrz).
max-width + margin: 0 auto = wyśrodkowana kolumna treści, jak na prawdziwych stronach.
img { max-width: 100%; } – zdjęcia nigdy nie wychodzą poza kolumnę.