Kurs HTML

Czym jest Model Pudełkowy (Box Model)?

Model pudełkowy (Box Model) to fundamentalna koncepcja w CSS, która opisuje, jak elementy HTML są renderowane na stronie jako prostokątne "pudełka". Każde takie pudełko składa się z czterech głównych obszarów, ułożonych warstwowo od środka na zewnątrz:

1. Obszar treści (Content Area): Miejsce, gdzie wyświetlana jest rzeczywista treść elementu (tekst, obrazki, inne elementy zagnieżdżone). Jego rozmiar jest określany przez właściwości width i height (lub wynika z samej treści).
2. Wypełnienie (Padding): Przezroczysty obszar otaczający bezpośrednio obszar treści. Służy do stworzenia przestrzeni między treścią a obramowaniem. Rozmiar paddingu kontrolują właściwości padding-*.
3. Obramowanie (Border): Linia (lub linie) otaczająca padding i treść. Może mieć różną grubość, styl i kolor. Kontrolowane przez właściwości border-*.
4. Margines (Margin): Przezroczysty obszar otaczający obramowanie. Służy do stworzenia przestrzeni *między* danym elementem a innymi elementami na stronie. Kontrolowany przez właściwości margin-*.

Zrozumienie modelu pudełkowego jest kluczowe do prawidłowego kontrolowania rozmiaru, odstępów i pozycjonowania elementów na stronie.

Diagram ilustrujący warstwy modelu pudełkowego CSS.

Składowe Modelu Pudełkowego

1. Obszar Treści (Content)

To serce pudełka, zawierające tekst, obrazy lub inne elementy HTML. Jego wymiary (width i height) domyślnie odnoszą się właśnie do tego obszaru (chyba że zmienimy to za pomocą box-sizing, o czym w dalszej części kursu).

2. Wypełnienie (Padding)

Padding tworzy wewnętrzny odstęp wokół treści. Jest zawsze przezroczysty, ale przyjmuje kolor tła (background-color) elementu. Można ustawić padding dla każdej strony indywidualnie (padding-top, padding-right, padding-bottom, padding-left) lub użyć właściwości zbiorczej padding.

.element {
  background-color: lightblue;
  padding: 20px; /* 20px paddingu ze wszystkich stron */
  /* Równoważne: */
  /* padding-top: 20px; */
  /* padding-right: 20px; */
  /* padding-bottom: 20px; */
  /* padding-left: 20px; */
}Kopiuj

3. Obramowanie (Border)

Border to linia rysowana wokół paddingu. Ma trzy główne właściwości: grubość (border-width), styl (border-style) i kolor (border-color). Najczęściej używa się właściwości zbiorczej border lub indywidualnych dla każdej strony (border-top, border-right, etc.).

.element {
  border: 1px solid black; /* 1px grubości, ciągła linia, czarny kolor */
  /* Równoważne: */
  /* border-width: 1px; */
  /* border-style: solid; */
  /* border-color: black; */
}Kopiuj

4. Margines (Margin)

Margin tworzy zewnętrzny odstęp wokół całego elementu (włączając border). Służy do odsuwania elementu od innych elementów. Jest zawsze przezroczysty i nie przyjmuje koloru tła elementu. Podobnie jak padding, można ustawiać marginesy indywidualnie (margin-top, etc.) lub zbiorczo (margin).

.element {
  margin: 15px; /* 15px marginesu ze wszystkich stron */
}

.inny-element {
  margin-top: 10px;
  margin-bottom: 20px;
}Kopiuj

Ważną cechą marginesów pionowych jest **nakładanie się marginesów (margin collapsing)**, o którym powiemy więcej w kolejnych lekcjach.

Całkowity Rozmiar Elementu

Domyślnie (przy box-sizing: content-box;), właściwości width i height określają tylko rozmiar **obszaru treści**. Całkowita szerokość i wysokość zajmowana przez element na stronie jest sumą jego treści, paddingu i obramowania (marginesy wpływają na odstęp od innych elementów, ale nie są wliczane do samego rozmiaru elementu w ten sam sposób).

Całkowita Szerokość = width + padding-left + padding-right + border-left-width + border-right-width

Całkowita Wysokość = height + padding-top + padding-bottom + border-top-width + border-bottom-width

Przykład:

.pudelko {
  width: 200px;
  height: 100px;
  padding: 10px;
  border: 2px solid red;
  margin: 5px;
}Kopiuj

Całkowita szerokość zajmowana przez .pudelko (bez marginesów) = 200px (width) + 10px (padding-left) + 10px (padding-right) + 2px (border-left) + 2px (border-right) = 224px.

Całkowita wysokość zajmowana przez .pudelko (bez marginesów) = 100px (height) + 10px (padding-top) + 10px (padding-bottom) + 2px (border-top) + 2px (border-bottom) = 124px.

Zrozumienie tego obliczenia jest kluczowe przy projektowaniu layoutów, aby uniknąć niespodzianek związanych z rozmiarem elementów.