Model pudełkowy (Box Model i box-sizing: border-box)

Elementy składowe Box Model:

1. Content – właściwa zawartość elementu (tekst, obraz).
2. Padding – wewnętrzny odstęp między treścią a krawędzią obramowania.
3. Border – linia obramowania wokół elementu.
4. Margin – zewnętrzny, niewidoczny odstęp oddzielający element od sąsiadów.

box-sizing: content-box vs border-box:

• content-box (domyślny): Właściwości width i height określają tylko rozmiar samej zawartości. Dodanie padding: 20px i border: 5px powiększy całkowity rozmiar elementu na ekranie!
• border-box: Właściwości width i height zawierają w sobie zarówno zawartość, jak i padding oraz border. Rozmiar elementu pozostaje stały.

/* Dobra praktyka resetu CSS: */
*, *::before, *::after {
    box-sizing: border-box;
}

Najczęstsze pułapki na egzaminie INF.03:

• Marginesy pionowe dwóch sąsiadujących bloków mogą ulegać tzw. zapadaniu marginesów (margin collapsing) – zamiast sumy marginesów stosowany jest margines o większej wartości.