Dokumentacja CSS z przykładami: Model pudełkowy

Q: Co robi box-sizing: border-box?

Sprawia, że width i height obejmują padding i obramowanie. Pudełko z width: 200px, padding: 20px i obramowaniem 5px ma wtedy dokładnie 200px szerokości, a obszar treści kurczy się do 150px. Wartość domyślna, content-box, dodaje padding i obramowanie na wierzch, co daje 250px.

Q: Jak oblicza się całkowitą szerokość elementu?

Przy domyślnym content-box: szerokość + lewy i prawy padding + lewe i prawe obramowanie. Przy border-box: samo width. W obu przypadkach margines leży poza pudełkiem, więc zwiększa miejsce, które element zajmuje, a nie jego własną szerokość.

Q: Czy ustawiać box-sizing: border-box na wszystkim?

Większość projektów tak robi, wpisując , ::before, *::after { box-sizing: border-box; } na początku arkusza stylów. Dzięki temu szerokości w procentach i padding sumują się tak, jak się tego spodziewasz, a frameworki takie jak Bootstrap i Tailwind mają ten sam reset.

Cztery warstwy każdego pudełka

Każdy element na stronie jest rysowany jako prostokąt z czterech warstw, od środka na zewnątrz:

Treść (content): tekst, obraz albo elementy potomne, o rozmiarze ustalonym przez width i height.
Padding: odstęp wewnątrz pudełka, między treścią a obramowaniem. Widać na nim tło elementu.
Obramowanie (border): linia wokół paddingu.
Margines (margin): odstęp poza obramowaniem, który odpycha inne pudełka. Zawsze przezroczysty.

W przykładzie każda warstwa ma własny kolor: niebieska treść, zielony padding, ciemne obramowanie i bursztynowy obszar wokół pudełka, czyli margines (rysowany przez opakowanie, bo sam margines jest przezroczysty).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Box model</title>
  <style>
    .margin-area {
      display: flow-root; /* keeps the margin inside the amber wrapper */
      background: #f59e0b;
      width: max-content;
    }
    .box {
      width: 160px;
      height: 60px;
      padding: 20px;
      border: 10px solid #111827;
      margin: 24px;
      /* blue over the content only, green over the padding */
      background: linear-gradient(#2563eb, #2563eb) content-box, #16a34a;
      color: white;
    }
  </style>
</head>
<body>
  <div class="margin-area">
    <div class="box">content</div>
  </div>
  <p id="out"></p>
  <script>
    const box = document.querySelector('.box');
    const s = getComputedStyle(box);
    document.getElementById('out').textContent =
      'content ' + s.width + ' + padding ' + s.paddingLeft + ' x 2 + border ' +
      s.borderLeftWidth + ' x 2 = ' + box.getBoundingClientRect().width + 'px wide';
  </script>
</body>
</html>

Linię pod pudełkiem mierzy przeglądarka: 160 + 20 + 20 + 10 + 10 = 220px. Margines dodaje do tego kolejne 24px z każdej strony, ale leży poza pudełkiem, więc nie wchodzi w te 220.

Obliczanie szerokości: content-box a border-box

Domyślnie (box-sizing: content-box) width ustawia tylko treść. Padding i obramowanie są dodawane na wierzch, więc pudełko wychodzi szersze niż wpisana liczba. Przy box-sizing: border-box width oznacza całe pudełko, a treść kurczy się, żeby zrobić miejsce na padding i obramowanie.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>box-sizing</title>
  <style>
    .box {
      width: 200px;
      padding: 20px;
      border: 5px solid #111827;
      background: #e5e7eb;
      margin-bottom: 12px;
    }
    .content { box-sizing: content-box; }
    .border { box-sizing: border-box; background: #bfdbfe; }
  </style>
</head>
<body>
  <div class="box content">content-box</div>
  <div class="box border">border-box</div>
  <script>
    document.querySelectorAll('.box').forEach((el) => {
      el.textContent += ': ' + el.getBoundingClientRect().width + 'px wide';
    });
  </script>
</body>
</html>

	`content-box` (domyślnie)	`border-box`
`width` oznacza	Treść	Treść + padding + obramowanie
`width: 200px; padding: 20px; border: 5px`	250px szerokości	200px szerokości
Obszar treści w tym przypadku	200px	150px
Margines	Na zewnątrz, nie wlicza się	Na zewnątrz, nie wlicza się

Reset border-box

Ponieważ border-box sprawia, że rozmiary się sumują, prawie każdy nowoczesny arkusz stylów zaczyna się od tej reguły:

*,
*::before,
*::after {
  box-sizing: border-box;
}

Najbardziej liczy się to przy procentach. Dwie kolumny z width: 50% i paddingiem nie mieszczą się w jednej linii przy content-box, bo każda ma 50% plus swój padding:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Columns</title>
  <style>
    .row { width: 400px; background: #e5e7eb; margin-bottom: 12px; }
    .col {
      display: inline-block;
      width: 50%;
      padding: 10px;
      border: 2px solid #2563eb;
      vertical-align: top;
    }
    .fixed .col { box-sizing: border-box; }
  </style>
</head>
<body>
  <div class="row"><!--
 --><div class="col">content-box</div><!--
 --><div class="col">wraps to a new line</div><!--
--></div>
  <div class="row fixed"><!--
 --><div class="col">border-box</div><!--
 --><div class="col">fits side by side</div><!--
--></div>
</body>
</html>

(Komentarze HTML usuwają odstęp między kolumnami inline-block, który w przeciwnym razie dodałby kilka pikseli.)

Model pudełkowy w DevTools

Każda przeglądarka rysuje model pudełkowy za ciebie. Kliknij element prawym przyciskiem myszy, wybierz Zbadaj i otwórz kartę Computed (Układ w Firefoksie): schemat pokazuje rozmiar treści w środku, otoczony wartościami paddingu, obramowania i marginesu. Najechanie na element w panelu Elements też barwi stronę: treść na niebiesko, padding na zielono, margines na pomarańczowo.

Pudełka liniowe działają inaczej

Opisany wyżej model pudełkowy dotyczy pudełek blokowych, takich jak <div> i <p>. Elementy liniowe, takie jak <span>, <a> i <strong>, zawijają się w linii tekstu i inaczej traktują odstępy w pionie:

Właściwość	Na elemencie liniowym
`width`, `height`	Ignorowane
Poziomy padding, obramowanie, margines	Stosowane, odpychają sąsiadów na boki
Pionowy padding i obramowanie	Rysowane, ale nie odpychają linii powyżej i poniżej
Pionowy margines	Ignorowany

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inline box</title>
  <style>
    p { width: 320px; line-height: 1.5; }
    span {
      background: #bfdbfe;
      padding: 12px 6px;
      margin: 30px 0;
      border: 2px solid #2563eb;
    }
    .ib { display: inline-block; }
  </style>
</head>
<body>
  <p>Text before an <span>inline span</span> whose vertical padding overlaps the lines around it.</p>
  <p>Text before an <span class="ib">inline-block</span> that makes room for its padding and margin.</p>
</body>
</html>

display: inline-block daje elementowi w linii pełny model pudełkowy: szerokość, wysokość, padding i margines zajmują miejsce. Szczegóły każdej warstwy znajdziesz na stronach padding w CSS i margin w CSS.

Częste błędy

Dodanie paddingu do pudełka o stałej szerokości i zdziwienie, że urosło. Przy content-box padding i obramowanie są dodawane do width. Użyj border-box.
Oczekiwanie, że margines przyjmie kolor tła. Margines jest zawsze przezroczysty; kolorową przestrzeń zrób paddingiem.
Ustawianie height albo pionowego marginesu na elemencie liniowym. Nic się nie dzieje; użyj display: inline-block albo block.
Pominięcie obramowania w obliczeniach. Obramowanie 1px na elemencie z width: 100% sprawia, że przy content-box jest on o 2px za szeroki, co może wywołać poziomy pasek przewijania.
Mylenie marginesu i paddingu. W skrócie: padding jest wewnątrz obramowania, margines na zewnątrz. Strona margin a padding zestawia je obok siebie.

Najczęściej zadawane pytania

Co to jest model pudełkowy CSS?

Zasada, według której każdy element jest rysowany jako prostokątne pudełko z czterech warstw: treści, paddingu wokół niej, obramowania wokół paddingu i marginesu poza obramowaniem. Szerokość, wysokość i odstępy w CSS ustawia się właśnie na tych warstwach.

Co robi box-sizing: border-box?

Sprawia, że width i height obejmują padding i obramowanie. Pudełko z width: 200px, padding: 20px i obramowaniem 5px ma wtedy dokładnie 200px szerokości, a obszar treści kurczy się do 150px. Wartość domyślna, content-box, dodaje padding i obramowanie na wierzch, co daje 250px.

Jak oblicza się całkowitą szerokość elementu?

Przy domyślnym content-box: szerokość + lewy i prawy padding + lewe i prawe obramowanie. Przy border-box: samo width. W obu przypadkach margines leży poza pudełkiem, więc zwiększa miejsce, które element zajmuje, a nie jego własną szerokość.

Czy margines jest częścią modelu pudełkowego?

Tak, to najbardziej zewnętrzna warstwa, ale zawsze jest przezroczysta i nigdy nie wlicza się do własnej szerokości ani tła elementu. Tylko odpycha sąsiednie pudełka.

Czy ustawiać box-sizing: border-box na wszystkim?

Większość projektów tak robi, wpisując *, *::before, *::after { box-sizing: border-box; } na początku arkusza stylów. Dzięki temu szerokości w procentach i padding sumują się tak, jak się tego spodziewasz, a frameworki takie jak Bootstrap i Tailwind mają ten sam reset.

Powiązane zagadnienia