Witajcie na kodu.je. Dzisiaj dowiecie się czym jest box model.
‍
[ intro kodu.je ]
‍
Jak widzicie mamy tutaj bardzo prosty markup, zwykłego jednego diva o klasie box, no i oczywiście adekwatny selektor w naszych stylach.
‍
Załóżmy że chcielibyśmy aby miał on wymiary 100px na 100 px,
no i powiedzmy tło białe. Wszystko działa tak jak byśmy się tego spodziewali.

Jeśli wpiszemy sobie jakąś treść w naszego diva "Jestem pudełkiem",
no oczywiście powinniśmy mu ustawić wtedy kolor na czarny,
no i gdy damy mu padding załóżmy 10px z każdej strony,
to oczywiście nasz tekst ma ten odstęp 10px z góry, z lewej i z prawej strony,
natomiast jak pewnie zauważyliście, rozmiar naszego diva zmienił się pomimo tego,
że wstawiliśmy sobie tutaj 100px szerokości i 100px wysokości.
‍
Dzieje się tak ponieważ domyślnie padding dodawany jest do tej naszej szerokości i wysokości naszego pudełka, czyli jeśli chcielibyśmy aby nasz box miał tak naprawdę tą szerokość i wysokość 100px i zawierał w sobie padding, no to oczywiście musimy sobie odjąć od szerokości wartość paddingu z lewej i z prawej strony, czyli tj. 10px z lewej, 10px z prawej, czyli 80px chcemy szerokości, no i analogicznie wysokość tak samo.
‍
I w tym momencie nasz box, ma już te wymiary 100x100px.
Jeśli dodamy sobie do tego jakieś obramowanie - 5px powiedzmy czarne,
to jak widzicie nasze pudełko jest szersze o ten nasz border,
więc ponownie jeśli chcielibyśmy aby cały div miał łącznie 100x100px,
no to musimy odjąć w tym wypadku 10px z każdej strony
I tak naprawdę możecie tworzyć strony w ten sposób,
ale jest do tego prostsze rozwiązanie.
‍
Jeśli ustawicie sobie 100x100px i wykorzystacie property box-sizing ustawiony na border-box, to wtedy w tym naszym width i height zostanie zawarta wartość paddingu i naszego bordera. Jest to tzw. box model, możecie do podejrzeć albo uruchamiając inspektora www w waszej przeglądarce, albo wykorzystując nasze Functionite'owe rozszerzenie do Bracketsa, które pokazuje wam tak naprawdę, jak wygląda ten box model.

Ten feature będzie dostępny w wersji Bracketsa 1.10, nie będziecie musieli nic instalować, będzie to po prostu zintegrowane z live preview.

Jak widzicie na box model składa się oczywiście padding,
gdy zmienimy sobie padding-top na powiedzmy 30px,
to jak widzicie nasz box dalej ma te 100x100px, w przypadku gdybyśmy nie używali box-sizing: border-box, oczywiście musielibyśmy sobie to odpowiednio odjąć z naszej wysokości i szerokości.
No ale oczywiście oprócz bordera i paddingu, jest też margines
Załóżmy, że 20px, różnica jest tylko taka, że tak naprawdę margines nie jest wliczany w szerokość samego diva, więc box-sizing nie ma wpływu na sam margines, ale jest on też częścią box modelu, dlatego warto to wiedzieć.
‍
Gdy zaczynałem swoją przygodę z front-endem, właśnie bardzo często nacinałem się na to, że ustawiałem sobie 2 bądź 3 boxy,
nadawałem im szerokość na załóżmy 50% w zależności od tego ile elementów było w danym wierszu i spodziewałem się, że elementy pojawią się w jednej linii, to niestety tak się nie działo, bo np. miałem właśnie ten border.

Gdy dowiedziałem się o właściwości box-sizing i parametrze border-box,
moja praca jako front-end developera, stała się wiele prostsza.
‍
Tematykę tę porusza również Damian w Webinarze "Przygotowanie do rozmowy kwalifikacyjnej". Możecie obejrzeć fragmenty tego Webinaru na naszym kanale, bądź odwiedzić nasz sklep internetowy by uzyskać dostęp do pełnej wersji.
Dostęp do pełnej wersji Webinaru Damiana uzyskacie klikając w odnośnik widoczny po lewej stronie ekranu,
a jeśli podobało wam się to wideo - koniecznie kliknijcie ikonkę subskrypcji, by nie przegapić nowych materiałów na naszym kanale