Co to jest model pudełkowy, czyli box model w CSS

Każdy początkujący powinien zaczynać naukę od podstaw. W przypadku CSS takim fundamentem jest model pudełkowy. Zanim zaczniesz uczyć się jakichkolwiek innych zagadnień związanych z CSSem, w pierwszej kolejności powinnaś skupić się właśnie na nim! W tym wpisie użyję różnych przykładów, aby pokazać Ci, jak model pudełkowy działa w praktyce, tak abyś pod koniec tego artykułu miała pełne zrozumienie pojęcia box model w CSS.

Zanim zagłębimy się w temacie, musisz wiedzieć, że każdy element na stronie internetowej to tak naprawdę prostokątne pudełko. Brzmi trochę tajemniczo, ale spokojnie zaraz wszystko stanie się jasne. 😀

Box model, czyli model pudełkowy w CSS

Aby pobudzić trochę Twoją wyobraźnie, muszę poprosić Cię o jedną małą przysługę. Otwórz tę stronę w przeglądarce chrome i najedź kursorem na jakikolwiek element na stronie, a następnie kliknij prawym przyciskiem myszy i wybierz Zbadaj element. Otworzą Ci się narzędzia deweloperskie devTools(to tutaj dzieje się mała magia, ale o tym w innym wpisie 😉). Ostatnie co musisz zrobić to znaleźć zakładkę Styles (z boku bądź u dołu) i zjechać do jej końca.

Twoim oczom powinno ukazać się coś podobnego do obrazka niżej:

 

Tadam! Jeśli wszystko poszło zgodnie z planem, to właśnie udało Ci się zlokalizować i zobaczyć na żywo model pudełkowy Twojego elementu. Brawo! 🥳

Jak widać, każda część modelu jest zaznaczona swoim kolorem i ma przypisaną nazwę. Wyjątkiem jest tutaj zawartość pudełka, czyli to niebieskie pole na samym środku(200×15). Przeanalizujmy, jak działają poszczególne elementy modelu i jakie są między nimi różnice.

Model pudełkowy składa się z 4 części:

• content (zawartość, treść)
• padding (odstęp wewnętrzny)
• border (obramowanie)
• margin (odstęp zewnętrzny)

Są to wszystkie elementy, których potrzebuje przeglądarka, aby stworzyć model pudełkowy. Na szczęście dzięki CSS możemy kontrolować każdy z nich z osobna. Zobaczmy jak.

Naszym punktem wyjścia niech będą zwykłe divy z treścią:

See the Pen
Box model CSS – default by frontowisko (@frontowisko)
on CodePen.

content

Content to zawartość naszego pudełka, która ma określoną szerokość i wysokość. Przykładem może być tekst, który w zależności od rozmiaru czcionki będzie przyjmował inny rozmiar. Jeśli chcemy mu narzucić konkretne wymiary, można je ustawić za pomocą właściwości CSS.

See the Pen
Box model CSS – content by frontowisko (@frontowisko)
on CodePen.

 

margin

Dzięki tej właściwości możemy dać naszym pudełkom trochę przestrzeni. Margin określa odstęp, jaki zajmie nasz element od pozostałych. W poniższym przykładzie odsunęłam pudełko B 50 pikseli w prawo i w dół, dzięki temu oddaliło się ono od pudełka A. Bez marginesów nasze pudełka byłby do siebie na stałe “przylepione”.

See the Pen
Box model CSS – margin by frontowisko (@frontowisko)
on CodePen.

 

padding

Określa przestrzeń między zawartością a krawędzią pudełka, możemy w ten sposób odpychać treść elementu od jego granic.

See the Pen
Box model CSS – padding by frontowisko (@frontowisko)
on CodePen.

Zauważyłaś, że po dodaniu paddingu nasze pudełko się trochę powiększyło? Jego obecne wymiary to już nie 200×200 tylko 260×260 (o tym, dlaczego tak się stało, opowiem Ci za chwilę). Jeśli chciałabyś, żeby pudełko zachowało swój wcześniejszy rozmiar, mimo dodania odstępu wewnętrznego to masz dwie opcje.

Pierwszą z nich jest zmiana pierwotnych wymiarów elementu, tak aby po dodaniu do nich nadanego paddingu otrzymać pożądane wymiary – w naszym przykładzie byłoby to ustawienie rozmiaru na 140×140. 140px szerokości + 30px paddingu z lewej + 30px paddingu z prawej daje razem docelowe 200px całkowitej szerokości. Wysokość w tym przykładzie wyliczamy w taki sam sposób.

Pewnie doszłaś do podobnego wniosku co ja i reszta świata, że nie jest to zbyt wygodne rozwiązanie. Można się dość łatwo rąbnąć przy liczeniu i zajmuje to zbyt dużo czasu. Dlatego pewnie interesuje Cię ten drugi sposób. Cierpliwości, zaraz do niego dojdziemy. 😎

border

Idąc od środka, następnym krokiem byłoby zdefiniowanie obramowania. Border otacza treść i margines wewnętrzny. Nawet jeśli go nie ustawisz, on nadal istnieje. Tylko że jego szerokość jest wtedy równa zero.

See the Pen
Box model CSS – border by frontowisko (@frontowisko)
on CodePen.

Analogicznie do tego, co wydarzyło się po dodaniu paddingu, nasz box się powiększył. Niebawem dowiesz się dlaczego i co z tym zrobić.

Kolejnym sposobem na pokazanie box model może być mini galeria:

źródło: https://web.dev/

• Content to grafika.
• Padding to odległość między ramą a grafiką.
• Border to ramka, która zapewnia dosłowne obramowanie grafiki.
• Marginesy to przestrzeń między każdą ramką.

Model pudełkowy i ratująca życie wielu frontend developerom właściwość box-sizing 🤩

Tak jak wyszło z omawianych przykładów, niektóre wartości modelu pudełkowego nie respektują nadanego width i height. Wspominałam, że można zaktualizować wymiary pudełka po nadaniu bordera lub paddingu, ale sama pewnie zauważyłaś, że jest to dosyć niewygodne i czasochłonne. Tutaj całe na biało przychodzi box-sizing. Właściwość, która domyślnie przyjmuje wartość content-box, dlatego nadawane przez nas wymiary ograniczają się tylko do pola treści, a nie zwracają uwagi na padding czy border i nie wliczają go w rozmiar całego pudełka.

See the Pen
Box model – content-box by frontowisko (@frontowisko)
on CodePen.

Dodajemy do naszego kodu właściwość box-sizing ustawioną na border-box:

See the Pen
Box model – border-box by frontowisko (@frontowisko)
on CodePen.

I voilà. Mamy to. Od razu lepiej!

Teraz nasze dzieci są zamknięte wewnątrz rodzica (małe pudełeczka w dużym pudle). CSS jest dokładnie taki sam w obu przypadkach z wyjątkiem jednego dodatku:

Ten kawałek kodu sprawia, że każdy element na stronie wie, żeby obliczać swoją szerokość i wysokość razem z dodanym paddingiem i borderem. W ten sposób kończymy z bałaganem, w którym nasze pudełka zmieniały zdefiniowany wcześniej rozmiar i wprowadzamy przewidywalność do naszego stylowania. Unikamy czasochłonnego kontrolowania wymiarów elementów. Dlatego border-box to najczęściej używana przez deweloperów wartość dla box-sizing.

Podsumowanie

Model pudełkowy, czyli box model ma fundamentalne znaczenie dla zrozumienia, jak wszystko będzie się układać na Twojej stronie i jaki sposób będziesz budować swoje layouty. Mamy nadzieję, że teraz doskonale rozumiesz, jak działa model pudełkowy i jak możesz go wykorzystać na swoją korzyść. Koniecznie sprawdź zamieszczone przeze mnie próbki kodu na codepenie i przetestuj swoją wiedzę w praktyce. 😊

PS. Daj znać czy ten wpis do dla Ciebie coś nowego, czy raczej odświeżenie wiedzy. Jeśli uważasz, że jest coś, o czym zapomniałam, a mogłoby dopełnić ten wpis, to podziel się tym w komentarzu. 😀

 

Przydatne linki:

https://www.youtube.com/watch?v=ly0umuICvXg
https://web.dev/learn/css/box-model/
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model