box-sizing – wyjaśnienie działania właściwości CSS

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.

Jak z pewnością już zauważyliście kiedy dodajemy do jakiegoś kontenera obramowania lub padding zmienia on swoje rozmiary. Jednym słowem staje się przeważnie większy. Taka sytuacja może spowodować, że jeśli mamy obok siebie kilka kontenerów tworzących np. kolumny przestaną się one obok siebie mieścić. W efekcie zamiast być obok siebie mogą np. ustawić się w pionie jeden pod drugim. A to nie koniecznie jest coś czego chcemy. Powodem tej sytuacji jest właśnie domyśle 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:

• border
• padding

Powodują zwiększenie rozmiaru kontenera. Przy tym ustawieniu obiekty rozszerzają się na zewnątrz a nie w obrębie obiektu. Co za tym możemy z tym zrobić? Naturalnie zmienić ustawienia tej zmiennej i zobaczyć czy efekt końcowy spełnia nasze oczekiwania.

Jakie wartości może przyjmować content-box?

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

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

Czyli oprócz naszej domyślnej wartości dysponujemy także 2 innymi.

content-box

Jak już wspomniałam jest to domyślny styl ustawiony w przeglądarkach internetowych. Brane są w nim pod uwagę właściwości takie jak width i height (czyli szerokość i wysokość), ale już nie border, margin lub padding. Dlatego obiekt powiększa swoje wymiary.

padding-box

Kolejna własność również bierze pod uwagę width i height oraz dopełnienie (padding). Jednak w dalszym ciągu nie bierzemy pod uwagę obramowania (border) ani marginesu (margin). O te właściwości może zostać zwiększony rozmiar obiektu.

border-box

Własności ta zawiera width, height, dopełnienie (padding) oraz obramowanie, jednak już nie margines.

---

Przykłady działania box-sizing

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.

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