ŁukaszBącik

#frontendowe spojrzenie na tworzenie stron www

Komentarze: 0

box-sizing, czyli model pudełkowy

Model pudełkowy w CSS jest istotnym zagadnieniem przy tworzeniu strony www. Opisuje on zasadę dopasowywania elementów do innych elementów.

Chciałbym przedstawić, a nawet zobrazować, model pudełkowy, na czym on dokładnie polega.

Przygotowanie kodu HTML

Musimy przygotować sobie element, na którym będziemy przedstawiać nasz model pudełkowy. Zachęcam też do zapoznania się z dokumentacją.

<div class="container">
    <div class="item">#1</div>
</div>

Możemy także wstępnie przygotować style, rzecz jasna we flexbox i wskazać selektory elementów, które zostaną dołączone do naszego modelu.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: 100%;
  max-width: 400px;
  padding: 2rem;
}
.item {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  padding: 20px;
  border: 3px solid #eee;
  margin: 20px;

  /* tu wstawimy box-sizing */
}

Oto jak przedstawi się nasz element:

element html

content-box

Domyślną wartością dla właściwości box-sizing jest content-box. Nasz przygotowany element ma wymiary 100×100 pikseli. Model pudełkowy dla tego elementu opisanego wartością content-box nie będzie zawierał własności padding, border oraz margin. Przedstawia się to następująco:

box-sizing: content-box

Jak widać wielkość 100×100 pikseli w tym modelu odnosi się do samej zawartości elementu.

border-box

Z kolei wartość border-box sprawi, że wielkość naszego elementu (100×100 pikseli) będzie zawierała w sobie już padding, border oraz margin. Oznacza to, że sam obszar zawartości elementu będzie zmniejszony o wartości otaczające. Obrazując:

box-sizing: border-box

Wsparcie przeglądarek

Podsumowanie

Różnica między tymi dwoma wartościami, jak widać, jest znacząca. Warto definiować model na początku pracy z kodem, by później uniknąć kłopotów, np. z pozycjonowaniem elementów obok siebie.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.

Może zainteresują Cię inne wpisy?