Model pudełkowy CSS (Box Model)

Co to jest Box Model?

W CSS każdy element otoczony jest pudełkiem składającym się z czterech elementów:

• Content – rzeczywista zawartość, np. tekst lub obraz
• Padding – wewnętrzne odstępy między zawartością a krawędzią border
• Border – obramowanie wokół paddingu
• Margin – zewnętrzne odstępy oddzielające element od innych

Wizualizacja

---------------------------
|        Margin           |
|  ---------------------  |
|  |      Border       |  |
|  |  ---------------  |  |
|  |  |   Padding   |  |  |
|  |  |  ---------  |  |  |
|  |  |  |Content|  |  |  |
|  |  |  ---------  |  |  |
|  |  ---------------  |  |
|  ---------------------  |
---------------------------

Przykładowa reguła CSS

.box {
  width: 300px;        /* szerokość content */
  padding: 20px;       /* odstęp wewnętrzny */
  border: 5px solid #007acc; /* obramowanie */
  margin: 15px;        /* odstęp zewnętrzny */
  background-color: #dbe9ff;
}

Zastosowanie Box Model

Poprawne rozumienie modelu pudełkowego jest kluczowe przy tworzeniu układów stron, definiowaniu przestrzeni między elementami i dbaniu o estetykę.

Złożone kompozycje tworzymy poprzez odpowiednie ustawienie paddingów, marginesów i obramowań, często z wykorzystaniem box-sizing.

Ćwiczenia praktyczne

.block {
  width: 250px;
  padding: 15px;
  border: 4px solid #0a66c2;
  margin: 10px;
  background-color: #f0f7ff;
  color: #0b2338;
}