Model pudełkowy (box model) CSS

Każdy element na stronie możemy traktować jak prostokątne pudełko obejmujące: zawartość, wewnętrzne odstępy, obramowanie i zewnętrzne odstępy. Ten koncept to tzw. model pudełkowy (box model) CSS. Zrozumienie go pozwala precyzyjnie kontrolować wymiary elementów i odstępy między nimi.

Podstawowe właściwości wpływające na wymiary elementu

• width (szerokość) – ustawiamy nią szerokość obszaru zawartości elementu. Np.:

  div { width: 300px; }

  Spowoduje to, że wszystkie divy (o ile są elementami blokowymi) będą miały 300 pikseli szerokości, chyba że dostępna przestrzeń jest mniejsza. Domyślnie elementy blokowe często rozciągają się na 100% dostępnej szerokości, jeśli nie ustawiono inaczej.

• height (wysokość) – podobnie jak width, określa wysokość obszaru zawartości. Np.:

  div.box { height: 150px; }

  Domyślnie wysokość elementu blokowego dopasowuje się do zawartości. Ustawiając sztywną wysokość, trzeba uważać na overflow — jeśli zawartość się nie zmieści, może wystawać lub zostać przycięta. Często zamiast height lepiej używać min-height lub pozwolić elementowi rosnąć.

• padding (dopełnienie) – wewnętrzny odstęp między zawartością a krawędzią elementu. Można go ustawić jednolicie:

  padding: 20px;

  albo osobno dla każdej strony: padding-top, padding-right, padding-bottom, padding-left. Padding zwiększa widoczne wymiary tła elementu — tło i kolor sięgają do zewnętrznej krawędzi paddingu.

• border (obramowanie) – ramka na krawędziach elementu. Składa się z grubości, stylu i koloru. Przykład:

  border: 2px solid black;

  Każda strona może mieć osobny border (np. border-bottom: 1px dotted gray;). Border również wpływa na całkowity rozmiar pudełka elementu (dodaje się do wymiarów).

• margin (margines) – zewnętrzny odstęp na zewnątrz elementu, oddzielający go od innych elementów. Można ustawić:

  margin: 20px;

  lub indywidualnie (margin-top itd.). Margines jest przezroczysty — nie wypełnia się kolorem tła elementu. Marginesy tworzą odstępy między pudełkami (np. odstęp między paragrafami to margin-top/margin-bottom).

Content box i całkowite wymiary

W domyślnym modelu pudełkowym width i height dotyczą tylko obszaru zawartości (content box). Oznacza to, że całkowita szerokość elementu to:

• width + padding lewy + padding prawy + border lewy + border prawy (+ ewentualne marginesy poza pudełkiem)
• Analogicznie całkowita wysokość obejmuje height + padding góra + padding dół + border góra + border dół (plus marginesy nad i pod wpływają na odstęp między elementami).

Przykład

<div class="box">Zawartość</div>

.box {
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 5px solid blue;
    margin: 30px;
    background-color: lightgrey;
}

Element .box będzie miał:

• Obszar zawartości: 200×100px (wewnątrz którego jest tekst "Zawartość").
• Dopełnienie: 20px z każdej strony — tekst nie dotyka krawędzi; tło lightgrey wypełnia również obszar paddingu.
• Niebieską ramkę: 5px wokół.
• Margines: 30px na zewnątrz — odstęp od innych elementów.

Całkowite wymiary pudełka .box licząc do zewnętrznej krawędzi ramki:

• Szerokość: 200 (content) + 20 + 20 (padding) + 5 + 5 (border) = 250px
• Wysokość: 100 (content) + 20 + 20 (padding) + 5 + 5 (border) = 150px

Margines (30px) znajduje się poza pudełkiem — odstęp między dwoma takimi elementami wyniósłby zwykle 30px + 30px = 60px, choć w pionie przeglądarki mogą stosować collapse marginesów i zamiast sumy przyjąć większy z nich.

Podsumowanie

Model pudełkowy jest fundamentem zrozumienia, jak elementy zajmują przestrzeń na stronie. Padding powiększa "wewnętrzny dystans" od treści do krawędzi elementu; margin zapewnia "zewnętrzny dystans" od innych elementów; border to wizualna granica, którą możemy stylować (np. różne style linii, zaokrąglone rogi przez border-radius). Dzięki zrozumieniu box model możemy kontrolować układ — np. zrobić kolumnę o stałej szerokości z ładnymi odstępami wewnątrz i na zewnątrz, obwiedzioną ramką — co wpływa na estetykę i czytelność strony.