Zmiany w pudełkowym modelu strony CSS z pomocą box-sizing

Czas czytania: 2 minut

Model pudełkowy jest jednym z najpopularniejszych sposobów budowania stron. Jak sama nazwa mówi składa się on z pudełek czyli mamy np. jeden duży kontener a w nim umieszczone elementy w kolejnych mniejszych kontenerach.

Do czego służy box-sizing?

Z pomocą box-sizing możemy zmienić sposób interpretacji domyślnego modelu pudełkowego CSS. Brzmi trochę dziwnie, ale zachwalę wam się rozjaśni w głowach o co chodzi.

Zapewne jak już zauważyliście jeśli do jakiegoś kontenera HTML doda się obramowanie (border) będzie ono domyślnie umiejscowione na zewnątrz kontenera. Dodając nam tym samym trochę na wielkości kontenera.

Taka sytuacja jest bardzo uciążliwa szczególnie jeśli posiadamy kilka kontenerów obok siebie. Często musimy wtedy zmniejszać kontenery tak by zachować odpowiedni układ. Jednak tak naprawdę nie musimy tego robić!

Wystarczy zmienić ustawienie box-sizing.

Jak działa box-sizing

Domyślnym ustawieniem box-sizing jest content-box. To właśnie dlatego wszystkie dodatkowe elementy jak:

Powodują zwiększenie rozmiaru kontenera. A naszym rozwiązaniem jest zmiana wartości.

Jakie wartości ma content-box

box-sizing może posiadać następujące właściwości:

box-sizing: content-box|border-box;

Czyli oprócz naszej domyślnej wartości dysponujemy także 2 innymi. Teraz by lepiej je zrozumieć przejdziemy do przykładów.

Na początek zbudujemy 2 identyczne kwadraty o wymiarach:

width: 100px; 
height: 100px; 
border: 8px solid blue; 
padding: 30px;

 

Jak widać są one identyczne. Teraz to zmienimy poprzez zmianę wartości box-sizing.

box-sizing: content-box;

box-sizing: border-box;

Jak widać różnica w rozmiarach jest całkiem spora.

Do czego może się przydać ta własność?

Jak pewnie już zauważyliście własność padding powoduje zwiększenie wewnętrznej przestrzeni poprzez rozszerzenie kontenera. W efekcie jest to dość uciążliwe dla stron szczególnie dla responsywnych, których komórki posiadają wartości w „%”. Dodając „box-sizing: border-box” zaczynamy się jednak ograniczać do samego kontenera przez co jest nam łatwiej obliczyć wymiary.
Normalnie wygląda to tak:
rozmiar kontenera + padding = szerokość

Jeżeli zastosujemy tą właściwość:
rozmiar kontenera = padding + reszta przestrzeni w środku = szerokość

Jak zawsze właściwość ta nie jest obsługiwana przez wszystkie przeglądarki internetowe.

  • Chrom 10.0 wcześniejsza 4.0 wymaga przedrostka -webkit- (-webkit-box-sizing: border-box)
  • Firefox 29.0, wcześniejsza 2.0 -moz- (-moz-box-sizing: border-box)
  • Safari 5.1, wcześniejsza 3.2 -webkit- (-webkit-box-sizing: border-box)
  • Internet Explorer 8
  • Opera 9.5

Zapraszam też do zapoznania się z:
http://www.w3schools.com/cssref/css3_pr_box-sizing.asp