Box model CSS

Ustawiasz karcie szerokość 300px, dodajesz odstęp wewnątrz i ramkę - a karta nagle wystaje poza kolumnę. Nic się nie zepsuło: tak działa model pudełkowy CSS (box model), a gdy go zrozumiesz, takie niespodzianki przestaną Cię zaskakiwać.

W kontekście HTML każdy element można traktować jak pudełko, podobne do paczki, którą wysyłamy pocztą. Przeanalizujmy to na przykładzie paczki:

Wymiary paczki: każde pudełko ma określone wymiary, takie jak wysokość (właściwość height) i szerokość (właściwość width).

Obramowanie paczki: pudełko może mieć obramowanie, na przykład dekoracyjny papier, co odpowiada właściwości border w CSS.

Odległość między paczkami: ponieważ nie zawsze wiadomo, co znajduje się w przesyłce, paczka musi zachować pewien margines od innych przesyłek, co w CSS odpowiada właściwości margin.

Przestrzeń wewnątrz paczki: nie możemy zapakować do paczki elementu większego niż jej rozmiar, więc musimy zostawić pewną przestrzeń wewnątrz pudełka, znaną jako padding.

W Egipcie tę samą budowę ma sarkofag: w środku mumia, wokół niej wyściółka, dalej złote ściany, a między sarkofagami w grobowcu wolna przestrzeń.

Cztery warstwy pudełka

Każdy element na stronie interpretujemy jako pudełko, które ma swoje wymiary i cztery warstwy, ułożone jedna w drugiej. Oto schemat, od zewnętrznej warstwy do środka:

+-------------------------------------------+
| margin                                    |
|   +-----------------------------------+   |
|   | border                            |   |
|   |   +---------------------------+   |   |
|   |   | padding                   |   |   |
|   |   |   +-------------------+   |   |   |
|   |   |   |      content      |   |   |   |
|   |   |   +-------------------+   |   |   |
|   |   +---------------------------+   |   |
|   +-----------------------------------+   |
+-------------------------------------------+

Content to treść elementu, na przykład tekst. Padding to odstęp między treścią a ramką, border to sama ramka, a margin - odstęp na zewnątrz, który oddziela element od sąsiadów. Tło elementu wypełnia treść, padding i obszar pod ramką, ale nigdy nie wchodzi na margines - margines jest zawsze przezroczysty.

Pamiętajmy, że elementy mają wymiary nawet wtedy, kiedy ich nie deklarujemy. Pamiętajmy również, żeby nie ustawiać wszystkim elementom wysokości i szerokości - jest to częsty błąd osób, które zaczynają przygodę ze stylami. Element blokowy bez podanej szerokości sam zajmuje całą dostępną szerokość, a sztywna wysokość sprawi, że dłuższy tekst wyleje się poza pudełko.

Border - ramka

Border to po prostu obramowanie elementu. Może być przykładowo jednopikselowy obrys karty na stronie internetowej. Najczęściej zapisujesz go skrótem, podając w jednej linii grubość, styl i kolor:

.karta {
  border: 1px solid gold;
}

W przykładzie kolejność to grubość (1px), styl (solid, czyli linia ciągła) i kolor (gold) - przeglądarka przyjmie je też w innej kolejności, ale ta jest najczęstsza. Oprócz solid spotkasz dashed (kreskowana), dotted (kropkowana) i double (podwójna). Bez stylu ramka w ogóle się nie pojawi, bo jego domyślna wartość to none. Zaokrąglone rogi dodasz osobną właściwością, np. border-radius: 10px.

Margin i padding

Margines służy nam do tworzenia odstępów między elementami, a padding - do tworzenia odstępów wewnątrz danego elementu. Przykładem może być karta, w której tekst jest oddalony o 20px od granic sekcji, a sama karta trzyma 15px dystansu od sąsiadów:

.karta {
  padding: 20px;
  margin: 15px;
}

Jedna wartość ustawia odstęp ze wszystkich czterech stron naraz. Każdą stronę możesz też ustawić osobno: margin-top, margin-right, margin-bottom i margin-left - analogicznie działają padding-top, padding-right, padding-bottom i padding-left. W skrócie z czterema wartościami kolejność biegnie zgodnie z ruchem wskazówek zegara, od góry:

.karta {
  margin: 10px 20px 30px 40px;
}

Ta karta ma 10px marginesu u góry, 20px z prawej, 30px na dole i 40px z lewej. Tak samo działa skrót padding, a dwie wartości, np. padding: 10px 20px, oznaczają: 10px u góry i na dole oraz 20px po bokach.

Ile naprawdę zajmuje pudełko?

Wróćmy do problemu z początku lekcji. Domyślnie width określa szerokość samej treści, a padding i ramka dokładają się do niej z obu stron:

.sarkofag {
  width: 200px;
  padding: 20px;
}

Ten element zajmie na ekranie 240px szerokości: 200px treści plus po 20px paddingu z lewej i z prawej. Gdyby miał jeszcze ramkę grubości 5px, doszłoby kolejne 10px. Margines nie powiększa pudełka, ale odsuwa sąsiadów. Jeśli wolisz, żeby width oznaczało całe pudełko razem z paddingiem i ramką, dodaj jedną deklarację:

.sarkofag {
  box-sizing: border-box;
  width: 200px;
  padding: 20px;
}

Teraz element ma dokładnie 200px szerokości, a na treść zostaje 160px - padding zmieścił się w podanej szerokości, zamiast ją powiększać. Wiele projektów ustawia box-sizing: border-box wszystkim elementom i to polecam bo liczenie wymiarów staje się dużo prostsze.

Praktyka

W edytorze poniżej porównasz dwa pudełka o szerokości 300px, ale z różnym paddingiem, ramką i marginesem. Komentarz w pliku CSS wylicza, ile miejsca zajmuje pierwsze z nich razem z marginesami - sprawdź to w narzędziach deweloperskich (F12), które pokazują box model każdego elementu:

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <title>CSS Box Model</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Box Model w CSS</h1>

    <div class="box-example">
        <p>Ten element ma: width, padding, border i margin.</p>
    </div>

    <div class="box-example-2">
        <p>Porównaj wymiary tego pudełka z poprzednim.</p>
    </div>

    <h2>Elementy Box Model:</h2>
    <ul>
        <li><strong>Content</strong> - treść (width x height)</li>
        <li><strong>Padding</strong> - odstęp wewnętrzny</li>
        <li><strong>Border</strong> - obramowanie</li>
        <li><strong>Margin</strong> - odstęp zewnętrzny</li>
    </ul>
</body>
</html>

W następnej lekcji zobaczysz, że pudełka układają się obok siebie albo jedno pod drugim w zależności od właściwości display. Pamiętaj: każdy element to sarkofag - mumia treści, wyściółka paddingu, złote ściany ramki i wolna przestrzeń marginesu.