Jednostki, margines, padding i box-sizing w praktyce

Po co się tego uczymy?

To jest DOKŁADNIE ten fragment CSS, którego brak najbardziej daje się we znaki w praktyce — bez zrozumienia jednostek i box-sizing elementy będą "nie chciały" mieć takich rozmiarów, jakich oczekujesz, a odstępy będą wyglądać na przypadkowe zamiast przemyślane.

Teoria

Lekcja 6 pokazała model pudełkowy (content/padding/border/margin) i flexbox od strony UKŁADU. Ta lekcja domyka temat: dokładne wartości, jednostki i jedno bardzo ważne, wcześniej pominięte pojęcie — box-sizing.

Jednostki długości w CSS:
px — piksele, wartość BEZWZGLĘDNA, zawsze taki sam rozmiar niezależnie od kontekstu.
% — procent względem rozmiaru RODZICA (np. width: 50%; to połowa szerokości kontenera).
em — względem rozmiaru czcionki RODZICA — jeśli rodzic ma font-size: 20px, to 2em w dziecku da 40px. Bywa mylące przy zagnieżdżeniach (mnoży się przez każdy poziom).
rem — względem rozmiaru czcionki elementu root (czyli <html>, domyślnie 16px) — NIE mnoży się przy zagnieżdżeniach, dlatego jest zalecaną, bezpieczniejszą jednostką do font-size i odstępów w całym projekcie.
vw / vh — procent szerokości/wysokości całego okna przeglądarki (viewport) — przydatne np. do sekcji na pełną wysokość ekranu.

Skrócony zapis margin i padding:
margin: 10px; — 10px z KAŻDEJ strony.
margin: 10px 20px; — 10px góra/dół, 20px lewo/prawo.
margin: 10px 20px 15px 5px; — kolejno: góra, prawo, dół, lewo (zgodnie z ruchem wskazówek zegara).
margin: 0 auto; — klasyczny sposób na WYŚRODKOWANIE bloku o ustalonej szerokości w poziomie (0 góra/dół, auto lewo/prawo — przeglądarka sama rozdziela dostępne miejsce po równo).

`box-sizing` — pojęcie pomijane w Lekcji 6, ale kluczowe w praktyce:
Domyślnie (box-sizing: content-box) właściwość width określa TYLKO szerokość treści (content) — padding i border DODAJĄ się do niej, więc element w praktyce zajmuje więcej miejsca, niż zadeklarowana szerokość sugeruje.
box-sizing: border-box; zmienia tę zasadę: padding i border są WLICZONE w zadeklarowaną width — element ZAWSZE zajmuje dokładnie tyle miejsca, ile ustawiłeś, niezależnie od paddingu. To dużo bardziej przewidywalne zachowanie, dlatego niemal każdy współczesny projekt CSS zaczyna się od reguły * { box-sizing: border-box; } stosowanej do WSZYSTKICH elementów naraz.

Schemat

content-box (domyślne)              border-box (zalecane)
width: 200px                        width: 200px
+ padding 20px z każdej strony      + padding 20px WLICZONY w width
+ border 2px z każdej strony        + border WLICZONY w width
= FAKTYCZNA szerokość: 244px        = FAKTYCZNA szerokość: 200px (bez niespodzianek)

Przykład z życia

Kiedy budujesz kartę produktu o zadeklarowanej szerokości 250px, dodajesz padding 20px i nagle karta "wystaje" poza siatkę o kilkadziesiąt pikseli — to klasyczny objaw braku box-sizing: border-box, z którym każdy początkujący prędzej czy później się zmierzy.

Kod (CSS)

/* niemal każdy projekt CSS zaczyna się od tej reguły */
* {
    box-sizing: border-box;
}

.karta-produktu {
    width: 250px;         /* dzięki border-box: TO jest ostateczna szerokość */
    padding: 20px;
    border: 2px solid #ccc;
    margin: 16px;          /* odstęp z każdej strony między kartami */
}

.strona-wysrodkowana {
    width: 800px;
    margin:  auto;        /* wyśrodkowanie w poziomie */
}

h1 {
    font-size: 2rem;        /* zawsze 2 * 16px = 32px, niezależnie od zagnieżdżenia */
    margin-bottom: 1rem;
}

.sekcja-startowa {
    height: 100vh;          /* pełna wysokość okna przeglądarki */
}

Komentarz i wyjaśnienie kodu

Selektor * (gwiazdka) w * { box-sizing: border-box; } oznacza "każdy element na stronie" — to jedna z niewielu sytuacji, w których warto zastosować regułę globalnie, bo przewidywalne rozmiary elementów są fundamentem sprawnego układania strony. margin: 0 auto; działa TYLKO wtedy, gdy element ma jawnie ustawioną szerokość (width) mniejszą niż jego rodzic — bez tego przeglądarka nie ma "nadmiaru" miejsca do równego rozdzielenia po bokach.

Ćwiczenie samodzielne

Dodaj do dowolnego swojego projektu regułę * { box-sizing: border-box; } i sprawdź, czy któryś z wcześniej zbudowanych układów zmienił rozmiar.

Zadania do pracy własnej

Wyśrodkuj poziomo blok o szerokości 600px na stronie za pomocą margin: 0 auto;.
Zbuduj trzy karty o IDENTYCZNEJ szerokości 200px, każda z innym paddingiem (10px, 20px, 30px) i sprawdź na własne oczy różnicę między content-box a border-box, przełączając tę właściwość.
Zbuduj siatkę katalogu filmów z Lekcji 6 od nowa z regułą box-sizing: border-box zastosowaną globalnie, korzystając WYŁĄCZNIE z jednostki rem dla rozmiarów czcionek i px dla stałych odstępów (padding/margin/border) — to podejście, którego realnie używa się w profesjonalnych projektach CSS.

Typowe błędy

Najczęstszy błąd to brak box-sizing: border-box, co prowadzi do niespodziewanie szerszych elementów niż zadeklarowana width sugeruje. Drugi błąd: używanie em zamiast rem w głęboko zagnieżdżonych elementach — rozmiar potrafi się nieoczekiwanie "namnożyć" przez kolejne poziomy zagnieżdżenia. Trzeci: próba użycia margin: 0 auto; na elemencie bez jawnie ustawionej szerokości — bez tego właściwość nic nie zmienia, bo element domyślnie zajmuje całą dostępną szerokość rodzica.

Nawiązanie do egzaminu zawodowego

Podobnie jak reszta CSS, jednostki i box-sizing nie mają osobnego efektu w INF.03.5, ale są fundamentem umiejętności budowy przewidywalnego, poprawnego wizualnie layoutu — realnie ocenianego elementu jakości w każdym zadaniu praktycznym z aplikacją webową.