Czym jest model pudełkowy, z czego się składa i jakie…

Model pudełkowy (CSS Box Model) to abstrakcyjna jednostka opisująca, jak elementy HTML są przedstawiane na stronie w postaci prostokątnych bloków. Określa rozmiar i rozmieszczenie zawartości, wewnętrznych odstępów, granic i zewnętrznych marginesów elementu.

Model pudełkowy składa się z następujących części:

Zawartość: Zawartość elementu (tekst, obrazy itp.). Jego rozmiar jest określany przez właściwości width i height.
Padding: Przestrzeń między zawartością elementu a jego granicą. Określa się ją właściwościami padding-top, padding-right, padding-bottom, padding-left lub skróconą właściwością padding.
Border: Granica wokół wewnętrznego odstępu i zawartości. Określa się ją właściwościami border-width, border-style, border-color lub skróconą właściwością border.
Margin: Przestrzeń między granicą elementu a elementami zewnętrznymi. Określa się ją właściwościami margin-top, margin-right, margin-bottom, margin-left lub skróconą właściwością margin.

Istnieją dwa główne rodzaje modelu pudełkowego, określane przez właściwość box-sizing:

content-box (domyślna wartość): Szerokość i wysokość elementu, ustawione przez właściwości width i height, odnoszą się tylko do obszaru zawartości. Padding i Border są dodawane do tych rozmiarów, zwiększając łączny rozmiar elementu.

div {
  width: 100px;
  height: 100px;
  padding: 10px; /* Dodaje 20px do łącznego rozmiaru na każdej osi */
  border: 2px solid black; /* Dodaje 4px do łącznego rozmiaru na każdej osi */
  box-sizing: content-box; /* Domyślne zachowanie */
}
/* Całkowity rozmiar elementu będzie wynosił 124px na 124px */

border-box: Szerokość i wysokość elementu, ustawione przez właściwości width i height, obejmują zawartość, padding i border. Padding i Border nie zwiększają łącznego rozmiaru elementu, lecz "ściśnięcie" obszaru zawartości.

div {
  width: 100px;
  height: 100px;
  padding: 10px; /* Wliczone w łączną szerokość/wysokość */
  border: 2px solid black; /* Wliczone w łączną szerokość/wysokość */
  box-sizing: border-box;
}
/* Całkowity rozmiar elementu będzie wynosił 100px na 100px */

Często używa się border-box dla bardziej przewidywalnego zachowania rozmiarów elementów przy dodawaniu padding i border. Jest to przydatne np. przy tworzeniu responsywnych układów, gdzie elementy mają zajmować określoną procentową szerokość.

Czym jest model pudełkowy, z czego się składa i jakie są jego rodzaje?