Czym jest model pudełkowy w CSS?

Model pudełkowy w CSS opisuje, jak obliczany jest przestrzeń zajmowana przez element na stronie internetowej. Obejmuje:

• Zawartość: Obszar dla faktycznej zawartości elementu (tekst, obrazy).
• Padding (wypełnienie): Przestrzeń między zawartością a granicą elementu.
• Border (ramka): Granica otaczająca padding i zawartość.
• Margin (margines): Przestrzeń wokół granicy elementu, oddzielająca go od innych elementów.

Domyślny rozmiar elementu (w modelu standardowym box-sizing: content-box) jest określany przez sumę rozmiarów zawartości, paddingu i borderu. Margines dodaje się do ogólnej zajmowanej przestrzeni, ale nie wpływa na rozmiar samego elementu.

Właściwość box-sizing: border-box zmienia sposób obliczania rozmiaru elementu, uwzględniając padding i border w łącznej szerokości i wysokości. W tym przypadku rozmiar elementu jest określany przez width/height, a padding i border "zjadają" miejsce w zawartości.

/* Model standardowy (domyślny) */
.element-content-box {
  width: 100px; /* Rozmiar zawartości */
  padding: 10px;
  border: 5px solid black;
  /* Całkowita szerokość: 100px (zawartość) + 10px (padding-left) + 10px (padding-right) + 5px (border-left) + 5px (border-right) = 130px */
}

/* Model border-box */
.element-border-box {
  width: 100px; /* Całkowita szerokość: zawartość + padding + border */
  padding: 10px;
  border: 5px solid black;
  /* Rozmiar zawartości: 100px - 10px (padding-left) - 10px (padding-right) - 5px (border-left) - 5px (border-right) = 70px */
}

Zrozumienie modelu pudełkowego jest kluczowe dla precyzyjnego pozycjonowania i układania elementów na stronie.