Zapanuj nad layoutem. Wprowadzenie do modelu pudełkowego w CSS

Model pudełkowy. Co to takiego?

Model pudełkowy w CSS to sposób, w jaki przeglądarki interpretują i układają elementy na stronie. Każdy element można wyobrazić sobie jako pudełko, które składa się z kilku warstw: zawartości (content), wewnętrznego marginesu (padding), obramowania (border) i zewnętrznego marginesu (margin). To właśnie jest esencja modelu pudełkowego. Tych kilka kluczowych właściwości pozwala nam precyzyjnie określić rozmiar i położenie poszczególnych komponentów w układzie strony.

Content
Na samym środku tego pudełka znajduje się zawartość. W zależności od typu elementu może to być tekst, obrazek, czy video. Rozmiar tego obszaru definiujemy przez width (szerokość) i height (wysokość). To jest właśnie to, co zwykle chcesz pokazać swoim użytkownikom.

Border
Następnie, mamy obramowanie, które dosłownie
rysuje granice naszego pudełka. Border może być subtelny lub wyraźny, w
zależności od potrzeb projektowych, i ma wpływ na to, jak element będzie
postrzegany przez użytkownika.

Padding
Idąc dalej, napotykamy na padding, czyli wewnętrzne wypełnienie. To przestrzeń pomiędzy zawartością a obramowaniem elementu. Dzięki paddingowi możemy oddzielić treść od krawędzi pudełka, co poprawia czytelność i estetykę elementu.

Margin
Na zewnątrz pudełka znajduje się margines, czyli margin. To przestrzeń, która oddziela nasze pudełko od innych elementów na stronie. Dzięki marginesom możemy uniknąć zlewanie się elementów w jedną, nieczytelną masę.

🛠️ Narzędzie programistyczne (DevTools) do analizy modelu pudełkowego

Aby przeanalizować model pudełkowy CSS dla wybranego elementu na stronie, możesz użyć zintegrowanych narzędzi dla deweloperów, dostępnych w większości współczesnych przeglądarek. Oto prosty poradnik dla przeglądarki Chrome, krok po kroku:

Krok 1: Otwieranie narzędzi deweloperskich

Otwórz przeglądarkę Chrome i przejdź do strony internetowej, którą chcesz badać.
Aby otworzyć Dev Toolsy masz kilka opcji:

Naciśnij Ctrl+Shift+I na swojej klawiaturze.
Możesz również użyć menu przeglądarki: kliknij trzy kropki w prawym górnym rogu przeglądarki, wybierz „Więcej narzędzi”, a następnie „Narzędzia deweloperskie”.
Kliknij prawym przyciskiem myszy w dowolnym miejscu na stronie i wybierz „Zbadaj”.

Krok 2: Wybór elementu do zbadania

Z otwartymi narzędziami deweloperskimi, znajdziesz się w zakładce „Elements”.
Możesz teraz przesuwać kursor po strukturze HTML w panelu „Elements”. Gdy to robisz, Chrome podświetli na stronie odpowiadające elementy.
Kliknij na dowolnym elemencie w panelu „Elements”, aby go wybrać dla dalszej inspekcji.

Krok 3: Przejście do zakładki „Styles”

Teraz spójrz na prawą stronę. Zakładka „Styles” powinna być jedną z pierwszych opcji, zaraz obok zakładki „Computed”. Tutaj zobaczysz listę wszystkich obliczonych właściwości CSS dla wybranego elementu, w tym te dotyczące modelu pudełkowego.

Krok 3: Edycja stylów

Aby zmodyfikować istniejące style lub dodać nowe, po prostu kliknij na dowolną właściwość CSS lub jej wartość w tej zakładce. Możesz również dodać nowe reguły, klikając na przestrzeń poniżej listy stylów i wpisując swoje CSS. Zmiany zostaną zastosowane natychmiast, umożliwiając Ci podgląd efektów swoich modyfikacji w czasie rzeczywistym. To doskonały sposób na naukę i doskonalenie swoich umiejętności w CSS.

Box-sizing

CSS3 wprowadziło właściwość box-sizing, która pozwala zmienić tradycyjny sposób, w jaki przeglądarki interpretują ustawione wymiary. Dostępne są dwie wartości:

content-box: Szerokość i wysokość elementu obejmują tylko treść, nie uwzględniając paddingu, borderu ani marginu. Jest to domyślne ustawienie.

border-box: Szerokość i wysokość elementu uwzględniają treść, padding i border, ale nie margin.

Jak obliczyć całkowite wymiary elementu - praktyczny przykład

Załóżmy, że masz element HTML z następującymi stylami:

HTML

CSS

Tak wygląda nasz element:

1. box-sizing: content-box

W obecnej sytuacji element .item ma ustawione box-sizing: content-box, co jest domyślną wartością w CSS. Oto co to oznacza:

Szerokość 200px odnosi się tylko do obszaru zawartości (czyli samego tekstu, obrazków itd. wewnątrz diva).
Dodatkowe 10px paddingu z każdej strony (łącznie 20px szerokości) oraz 2px obramowania z każdej strony (łącznie 4px) powodują, że całkowita szerokość elementu wynosi 200px + 20px + 4px = 224px.
Marginesy 5px z każdej strony nie są wliczane do szerokości, ale wpływają na odstęp od innych elementów w layoucie.

2. box-sizing: border-box
Teraz zmieńmy box-sizing na border-box dla porównania. Zmodyfikuj plik CSS:

W tym przypadku:

Szerokość 200px uwzględnia zarówno padding, jak i obramowanie.
Całkowita szerokość elementu nadal wynosi 200px, ale zawiera już padding i border. Dlatego obszar zawartości jest mniejszy, bo padding i border „zjadają” część przestrzeni.
Marginesy, tak jak w pierwszym przypadku, nie wpływają na szerokość boxa, ale oddzielają go od innych elementów.

Decyzja o używaniu content-box czy border-box znacząco wpływa na proces projektowania i implementowania układów stron internetowych. Border-box jest najczęściej wybierany przed web deweloperów ze względu na jego przewidywalność i łatwość obliczania całkowitych rozmiarów elementów, co jest kluczowe przy tworzeniu responsywnego designu.

Model pudełkowy CSS - podsumowanie

Jeśli twoja strona na komputerze prezentuje się jak dzieło sztuki, ale na telefonie wygląda jak dzieło przypadku, to znak, że nadszedł czas, by zaprzyjaźnić się z modelem pudełkowym. A wtedy? Możesz oczekiwać, że na każdym urządzeniu twoja strona będzie wyglądać świetnie, niezależnie od rozmiaru ekranu.

Chcesz dowiedzieć się więcej? Zapraszam do zapoznania się z naszym przewodnikiem CSS dla początkujących.

Ewelina Kwiatkowska

Dzień zaczyna od kawy i linijki kodu, a gdy znika sprzed ekranu, z pewnością znajdziesz ją albo z patelnią w ręku w kuchni, albo z rakietką przy stole do ping-ponga.