Box Model (Model Pudełkowy)

Każdy tag w HTML (nawet zwykły tekst) jest w rzeczywistości... pudełkiem. Nawet jeśli tego pudełka nie widzisz. Zrozumienie, z czego składa się to pudełko, rozwiązuje 90% problemów pt. "Czemu to mi nie pasuje do krawędzi?!" na egzaminie INF.03.

Z czego składa się pudełko?

Od środka na zewnątrz:

1. Content (Treść) – Szerokość (width) i wysokość (height) samego tekstu lub obrazka.
2. Padding (Margines wewnętrzny) – Przestrzeń między treścią a ramką. Wypycha ramkę na zewnątrz (lub wtłacza treść do środka).
3. Border (Obramowanie) – Ramka wokół pudełka.
4. Margin (Margines zewnętrzny) – Przestrzeń za ramką. Opycha inne pudełka z daleka od nas.

.pudelko {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 5px solid black;
    margin: 30px;
}

Wyjaśnienie skrótów Padding/Margin

Gdy widzisz polecenie na egzaminie: "Marginesy górne i dolne 10px, lewe i prawe 20px", możesz to zapisać krótko!

• margin: 10px; (Wszystkie 4 strony po 10px)
• margin: 10px 20px; (Góra/Dół 10px, Prawa/Lewa 20px)
• margin: 10px 20px 30px 40px; (Zgodnie ze wskazówkami zegara: Góra, Prawa, Dół, Lewa – tzw. reguła TRouBLe).

Magiczne centrowanie

Najlepszy sposób na wyśrodkowanie całego bloku (np. kontenera na stronie) to margin: auto; (lub margin: 0 auto;). Przeglądarka po równo dzieli wolne miejsce po lewej i prawej.

Uwaga: Blok musi mieć zadeklarowaną określoną szerokość (np. width: 80%), by to zadziałało!

Pułapka box-sizing 🪤

Domyślnie w CSS, jeśli zrobisz kwadrat 100x100px i dodasz mu padding: 20px, jego szerokość wzrośnie do... 140px (100 + lewy padding 20 + prawy 20)! Pudełko rośnie!

Rozwiązanie? CKE często to podpowiada. Wrzucasz do CSS kod:

* {
    box-sizing: border-box;
}

Dzięki temu pudełko zawsze zachowa zadeklarowane 100px szerokości, a padding "wejdzie do środka", ściskając tekst. To gamechanger w pozycjonowaniu.