Model pudełkowy (Box Model) w CSS

Model pudełkowy to podstawowa koncepcja CSS, która określa, jak przeglądarka oblicza wielkość i układ elementów na stronie. Każdy element HTML traktowany jest jak prostokątne pudełko, składające się z kilku warstw.

1. Struktura modelu pudełkowego

Każdy element składa się z czterech głównych obszarów (od wewnątrz na zewnątrz):

Content (zawartość) – właściwa treść elementu (tekst, obraz, inne elementy).
Padding (wypełnienie) – przestrzeń między treścią a ramką.
Border (ramka) – obramowanie otaczające padding i content.
Margin (margines) – odstęp między elementem a sąsiadującymi elementami.

Schemat:

+-----------------------------+
|         Margin              |
|  +-----------------------+  |
|  |       Border          |  |
|  |  +-----------------+  |  |
|  |  |    Padding      |  |  |
|  |  | +-------------+ |  |  |
|  |  | |   Content   | |  |  |
|  |  | +-------------+ |  |  |
|  |  +-----------------+  |  |
|  +-----------------------+  |
+-----------------------------+

2. Marginesy (`margin`)

Marginesy tworzą odstęp na zewnątrz elementu.

Sposoby zapisu:

Jedna wartość → wszystkie strony (margin: 10px;)
Dwie wartości → góra/dół, lewa/prawa (margin: 10px 20px;)
Trzy wartości → góra, lewa/prawa, dół (margin: 10px 20px 30px;)
Cztery wartości → góra, prawa, dół, lewa (margin: 10px 20px 30px 40px;)

Można ustawiać indywidualnie:

Właściwości specjalne:

auto – najczęściej stosowane przy wyśrodkowywaniu bloków:

Scalanie marginesów (margin collapsing) Jeżeli dwa elementy mają sąsiadujące marginesy w pionie, nakładają się na siebie, a nie sumują.

3. Wypełnienia (`padding`)

Padding to odstęp wewnętrzny – między treścią a obramowaniem.

Zasady zapisu takie same jak w margin (1–4 wartości). Padding zawsze powiększa obszar elementu (chyba że używamy box-sizing: border-box – patrz dalej).

4. Ramki (`border`)

Border to linia otaczająca element.

Podstawowa składnia:

Można kontrolować:

grubość (border-width: 5px;)
styl (solid, dashed, dotted, double, none, groove itd.)
kolor (border-color: red;)

Ramki można definiować osobno dla każdej strony:

5. Wysokość i szerokość elementów

a) width i height

Określają wielkość obszaru treści (content), nie licząc paddingu, borderu i marginu.

b) min i max

Można ustawić ograniczenia:

Przydatne w responsywnych stronach (np. maksymalna szerokość artykułu).

6. Box-sizing

Domyślnie (content-box) wartości width i height dotyczą tylko obszaru treści (content). Padding i border są dodawane do tej wielkości.

a) content-box (domyślne)

Całkowita szerokość = 200px + 20px*2 + 10px*2 = 260px

b) border-box

Wielkość elementu liczona jest łącznie z paddingiem i borderem.

Całkowita szerokość = 200px (nie powiększa się mimo paddingu i borderu).

✅ To ustawienie jest znacznie wygodniejsze przy tworzeniu layoutów. Często stosuje się globalnie: