INF.03 · HTML i CSS
Jednostki, margines, padding i box-sizing w praktyce
Rozmiar zewnętrzny da się przewidzieć.
- Przewidź efekt
- Zmień i sprawdź
- Zbuduj samodzielnie
Po tej lekcji: Obliczysz szerokość pudełka i świadomie wybierzesz px, procent, em, rem oraz jednostki widoku.
Zrozum, zanim zapiszesz
Przy content-box width oznacza szerokość treści. Do zewnętrznej szerokości obramowania dodaj padding i border z obu stron. Przy border-box zadane width obejmuje treść, padding i obramowanie. Margin pozostaje na zewnątrz w obydwu wariantach.
CSS px jest jednostką odniesienia, nie obietnicą jednego fizycznego piksela ekranu. rem odnosi się do fontu html; em w font-size do fontu rodzica, a np. w padding do fontu samego elementu. Procenty zależą od właściwości: width zwykle od szerokości bloku zawierającego; procentowe marginesy i padding także od jego szerokości. vh/vw odnoszą się do widoku; na telefonie svh/dvh pomagają uwzględniać zmienne paski przeglądarki.
margin: 0 auto centruje blok w dostępnym miejscu, gdy jego użyta szerokość jest mniejsza od szerokości kontenera; może to wynikać również z max-width, nie tylko jawnego width. gap jest często lepszy do odstępów między elementami Flex/Grid. Sąsiednie pionowe marginesy zwykłych bloków mogą się zapadać.
Przygotuj HTML do tego przykładu
Ten fragment wstaw do body dokumentu z lekcji 1. W head dodaj <link rel="stylesheet" href="style.css">. Kolejny blok zapisz w osobnym pliku style.css, obok index.html.
<main class="kontener"><article class="karta"><h1>Karta wydarzenia</h1><p>Sprawdź szerokość w narzędziach przeglądarki.</p></article></main>Przykład do odtworzenia
*, *::before, *::after { box-sizing: border-box; }
.kontener { max-width: 40rem; margin-inline: auto; }
.karta { width: 100%; padding: 20px; border: 2px solid #235; }
/* Dla kontenera 320px karta ma 320px wraz z padding i border.
Po zmianie na content-box zajmie 320 + 40 + 4 = 364px. */Czytaj skróty w kolejności
| Zapis | Wartości |
|---|---|
padding: 10px | Wszystkie strony: 10px |
padding: 10px 20px | Góra/dół: 10px, lewo/prawo: 20px |
padding: 10px 20px 15px | Góra: 10px, boki: 20px, dół: 15px |
padding: 10px 20px 15px 5px | Góra, prawo, dół, lewo |
margin-inline: auto | Podział dostępnego miejsca w osi inline |
Sprawdź w działaniu
Zmierz pudełko, nie zgaduj
Zmień padding i box-sizing. Odczytaj rzeczywistą szerokość obramowania oraz przestrzeń z marginesami.
Najpierw przewidź zmianę. Potem wykonaj ją i wyjaśnij różnicę między kodem a efektem.
Ćwiczenie z pomocą · samodzielna praca
Zbuduj samodzielnie — z pomocą, gdy potrzebujesz
W kontenerze 320px przygotuj kartę z width:100%, padding:20px i border:2px solid. Oblicz i zmierz jej szerokość dla content-box oraz border-box. Następnie ustaw max-width:40rem i margin-inline:auto, sprawdź szerokie okno.
Content-box: 364px obramowania. Border-box: 320px obramowania. Marginesów nie wliczamy do width.
? Potrzebujesz pomocy? Rozwiązuj krok po kroku.
Krok 1 — pokaż podpowiedź
Zapisz wzór: szerokość treści + 2×padding + 2×border.
Krok 2 — pokaż podpowiedź
Włącz border-box i powtórz pomiar w narzędziach przeglądarki.
Krok 3 — pokaż podpowiedź
Zmień szerokość okna i sprawdź centrowanie oraz brak przewijania poziomego.
Otwórz tylko tyle podpowiedzi, ile potrzebujesz. Po każdym kroku wróć do zadania i sprawdź wynik.
Sprawdź, zanim oddasz
Otwórz plik w przeglądarce i sprawdź, czy kod daje przewidywany wynik. Użyj narzędzi przeglądarki: Elements pokazuje elementy, Styles dopasowane reguły, a Network brakujące zasoby. Sprawdź kod w Nu HTML Checker; przy fragmentach wklej je do pełnego dokumentu z lang, charset, title i body. Komunikaty walidatora nie zastępują próby klawiaturą i kontroli czytelności.
Podsumowanie
Co warto zapamiętać
- Obliczysz szerokość pudełka i świadomie wybierzesz px, procent, em, rem oraz jednostki widoku.
- Potrafisz wskazać w kodzie przyczynę widocznego efektu.
- Przed oddaniem sprawdzasz wynik w przeglądarce, nie tylko zapis pliku.
Dalej na swoim koncie
Rozgrzewki, quiz i zadania są w biurku ucznia.
Teoria jest otwarta dla wszystkich. Żeby rozwiązywać zadania, zapisywać szkice i widzieć swój postęp, zaloguj się.
Zaloguj się →