Czym jest model pudełkowy w CSS?

Model pudełkowy CSS opisuje, jak elementy są wyświetlane na stronie jako prostokątne bloki. Składa się z czterech stref lub warstw nakładających się na siebie, zaczynając od zawartości:

1. Zawartość: Obszar, w którym znajduje się rzeczywista zawartość elementu (tekst, obrazy itp.). Jego rozmiar jest określany przez właściwości width i height.

2. Padding (Wewnętrzny odstęp): Przezroczysty obszar między zawartością a obramowaniem elementu. Ustawia się go za pomocą właściwości padding-top, padding-right, padding-bottom, padding-left lub skrótu padding.

3. Obramowanie (Border): Linia otaczająca Padding i Zawartość. Jej styl, grubość i kolor są określane przez właściwości border-width, border-style, border-color lub skróty, np. border.

4. Margines (Margin): Przezroczysty obszar wokół obramowania elementu, oddzielający go od innych elementów. Ustawia się go za pomocą właściwości margin-top, margin-right, margin-bottom, margin-left lub skrótu margin. Marginesy sąsiadujących bloków mogą się nakładać.

Standardowe zachowanie, opisane przez box-sizing: content-box (domyślnie), określa, że właściwości width i height odnoszą się tylko do zawartości (Content). Padding i Border są dodawane do tego rozmiaru, zwiększając łączny rozmiar elementu.

Przy użyciu box-sizing: border-box, właściwości width i height obejmują Zawartość, Padding i Border. Margines zawsze dodaje się do łącznego rozmiaru elementu, niezależnie od box-sizing.

Przykład:

div {
  width: 100px; /* Szerokość zawartości (dla content-box) lub całego elementu (dla border-box) */
  height: 50px; /* Wysokość zawartości (dla content-box) lub całego elementu (dla border-box) */
  padding: 10px; /* Wewnętrzny odstęp */
  border: 2px solid black; /* Obramowanie */
  margin: 15px; /* Margines zewnętrzny */
}

W zależności od wartości box-sizing, rzeczywiste rozmiary elementu będą różne.

• box-sizing: content-box: Rzeczywista szerokość = 100px (Zawartość) + 10px (Padding-lewy) + 10px (Padding-prawy) + 2px (Border-lewy) + 2px (Border-prawy) = 124px. Rzeczywista wysokość = 50px (Zawartość) + 10px (Padding-górny) + 10px (Padding-dolny) + 2px (Border-górny) + 2px (Border-dolny) = 74px.
• box-sizing: border-box: Rzeczywista szerokość = 100px (Zawartość + Padding + Border). Rzeczywista wysokość = 50px (Zawartość + Padding + Border).

Margines zewnętrzny margin: 15px jest dodawany wokół tego całkowitego rozmiaru.