Model pudełkowy CSS — zadania z margin, padding i border

Każdy element na stronie jest prostokątnym „pudełkiem”: ma treść, wcięcie wewnątrz, ramkę i odstęp na zewnątrz. Zrozumienie tego modelu pozwala przewidzieć, ile miejsca zajmie element, i wyjaśnić typowe zagadki: dlaczego karta jest szersza, niż zapisano w CSS, i dlaczego odstęp między dwoma blokami jest mniejszy, niż wynikałoby z dodawania.

Scenariusz jest przeznaczony na 45 minut dla klasy, która zna podstawy HTML i CSS — na przykład po pierwszej lekcji CSS. Uczniowie mierzą rozmiary w narzędziach deweloperskich przeglądarki, więc potrzebna jest przeglądarka z konsolą (F12).

Przygotowanie stanowisk

Rozpakuj pakiet z sekcji materiałów do folderu model-pudelkowy. W folderze start jest strona z dwoma elementami .karta i pustym miejscem na reguły w style.css. HTML-a nie zmieniasz. Po zapisie pliku odśwież stronę. Gotowy efekt jest w folderze rozwiazanie. Internet nie jest wymagany.

Pomiary: po kliknięciu elementu prawym przyciskiem i wybraniu Zbadaj (lub po F12) przeglądarka pokazuje na zakładce Elementy schemat pudełka z wymiarami treści, wcięcia, ramki i marginesu.

Cele i plan lekcji

Po zajęciach uczeń potrafi:

• wskazać cztery warstwy pudełka: treść, padding, border i margin;
• obliczyć całkowitą szerokość elementu dla box-sizing: content-box i border-box;
• zapisać skrócone właściwości padding, margin i border;
• wyjaśnić zwijanie marginesów pionowych i wyśrodkować blok przez margin: 0 auto.

Cztery warstwy pudełka

Od środka na zewnątrz:

1. treść (content) — tekst, obraz; jej szerokość ustawia width;
2. padding — wolne miejsce między treścią a ramką, ma kolor tła elementu;
3. border — ramka;
4. margin — przezroczysty odstęp od sąsiednich elementów, nie jest częścią tła.

Domyślnie width oznacza szerokość samej treści (box-sizing: content-box). Padding i ramkę przeglądarka dolicza z każdej strony. Dla karty:

.karta {
  width: 300px;
  padding: 20px;
  border: 2px solid #1e3a8a;
}

całkowita szerokość to 300 + 2 · 20 + 2 · 2 = 344 px. Taką wartość pokazuje przeglądarka dla tej karty (sprawdzono pomiarem w przeglądarce). Kłopot pojawia się, gdy kilka elementów ma mieścić się obok siebie albo w kontenerze o stałej szerokości: trzeba odejmować padding i ramkę przy każdej zmianie.

Wygodniejszy jest box-sizing: border-box, przy którym width obejmuje treść, padding i ramkę:

*, *::before, *::after {
  box-sizing: border-box;
}

Teraz ta sama karta ma całkowitą szerokość 300 px, a na treść zostaje 300 − 40 − 4 = 256 px. Reguła z gwiazdką działa na wszystkie elementy i jest dziś standardem w większości projektów.

Skrócone zapisy i margines

Właściwości padding i margin przyjmują od jednej do czterech wartości:

Wartość auto dla lewego i prawego marginesu bloku o ustalonej szerokości wyśrodkowuje go poziomo w kontenerze. Dlatego karta z width: 300px i margin: 16px auto 24px stoi na środku strony.

Marginesy pionowe sąsiednich bloków zwijają się: gdy dolny margines pierwszej karty ma 24 px, a górny margines drugiej 16 px, odstęp między nimi nie wynosi 40 px, tylko tyle, ile większy z nich — 24 px. To zachowanie dotyczy marginesów pionowych elementów blokowych i często zaskakuje uczniów.

Trzy zadania

Zadanie 1. Pomiar bez border-box. W start/style.css dopisz regułę .karta z width: 300px, padding: 20px i border: 2px solid #1e3a8a. Najpierw oblicz całkowitą szerokość karty, a potem sprawdź ją w narzędziach deweloperskich.

Zadanie 2. border-box. Dodaj na początku arkusza regułę *, *::before, *::after { box-sizing: border-box; }. Zmierz kartę ponownie. Ile wynosi teraz całkowita szerokość i ile miejsca zostaje na treść?

Zadanie 3. Marginesy. Ustaw margin: 16px auto 24px i dodaj kartom tło #ffffff oraz zaokrąglenie 8 px. Sprawdź, czy karty są na środku i jaki jest odstęp między nimi. Wyjaśnij, dlaczego nie wynosi 40 px.

Dla chętnych: zmień padding na 10px 30px i oblicz, ile miejsca na treść zostanie przy border-box. Następnie wyłącz border-box w narzędziach deweloperskich i sprawdź całkowitą szerokość.

Rozwiązania i wyniki pomiarów

Arkusz z pakietu (rozwiazanie/style.css):

*, *::before, *::after {
  box-sizing: border-box;
}
.karta {
  width: 300px;
  padding: 20px;
  border: 2px solid #1e3a8a;
  border-radius: 8px;
  background: #ffffff;
  margin: 16px auto 24px;
}

Odstęp 24 px wynika ze zwijania marginesów: dolny margines pierwszej karty (24 px) i górny drugiej (16 px) nakładają się, a obowiązuje większy z nich. Pomiary 344, 300, 256 i 24 px sprawdzono w przeglądarce dla stron z pakietu.

Typowe błędy

Pytania kontrolne i punktacja

1. Z jakich czterech warstw składa się pudełko elementu?
2. Ile wynosi całkowita szerokość elementu width: 200px; padding: 10px; border: 1px solid w content-box?
3. Co oznacza margin: 0 auto dla bloku o stałej szerokości?

Odpowiedzi: Treść, padding, ramka i margines. 200 + 2 · 10 + 2 · 1 = 222 px. Blok jest wyśrodkowany poziomo w kontenerze.

Proponowana punktacja (razem 10 punktów): zadanie 1 — obliczenie 344 px 1 pkt, pomiar 1 pkt; zadanie 2 — poprawna reguła border-box 1 pkt, szerokości 300 i 256 px 2 pkt; zadanie 3 — skrócony zapis marginesu 1 pkt, wyśrodkowanie 1 pkt, wyjaśnienie odstępu 24 px 2 pkt; poprawnie zapisane jednostki 1 pkt. Zadanie dla chętnych nie jest wymagane do pełnej oceny.

Materiały do pobrania

• Pakiet CSS: projekt startowy, rozwiązanie i karta pracy
• Karta pracy ucznia — otwórz i wydrukuj

Rozpakuj ZIP przed otwarciem plików. Materiały są dostępne bez logowania; publiczne rozwiązanie służy nauce i samodzielnemu sprawdzeniu, a nie poufnemu sprawdzianowi.

Co dalej po modelu pudełkowym?

Kolejne kroki to jednostki (px, %, rem), układy Flexbox i Grid oraz pozycjonowanie elementów. Ten materiał rozwija dział o układzie strony w kursie CSS w TablicaPro, gdzie znajdziesz prezentacje, ćwiczenia i testy do prowadzenia lekcji.

Źródła techniczne: model pudełkowy w dokumentacji MDN oraz zwijanie marginesów w MDN. Jeśli uczysz też układów, zobacz lekcję o Flexboksie i lekcję o tabelach HTML.