Marginesy i dopełnienie w CSS – czym się różnią właściwości margin i padding?

Właściwość margin kontroluje pustą przestrzeń na zewnątrz elementu, odpychając go od innych obiektów na stronie. Z kolei padding definiuje odległość wewnątrz elementu, tworząc bufor między jego krawędzią a samą zawartością, taką jak tekst czy obraz. Marginesy i dopełnienie w CSS – czym się różnią właściwości margin i padding to pytanie, które zadaje sobie każdy początkujący twórca interfejsów, ale odpowiedź na nie determinuje całą architekturę układu strony. Margin odpowiada za relacje międzysąsiedzkie w strukturze dokumentu HTML. Padding chroni treść przed przyklejeniem się do ramki kontenera. To fizyka świata przeglądarek.

Zrozumienie tych dwóch koncepcji wymaga odrzucenia intuicji z programów graficznych. Przeglądarka renderuje dokument tekstowy, a my za pomocą kaskadowych arkuszy stylów narzucamy mu wymiary przestrzenne. Kiedy ustawiasz tło dla swojego bloku, rozleje się ono dokładnie po obszarze wyznaczonym przez zawartość i jej padding. Margines pozostanie zawsze przezroczysty. Nie ma od tego wyjątków. I to jest pierwsza rzecz, którą musisz zakodować w głowie na stałe.

Jak działa CSS Box Model w praktyce?

Każdy znacznik HTML na twojej stronie to prostokątne pudełko. Nawet jeśli za pomocą właściwości border-radius zrobisz z niego idealne koło, dla silnika renderującego przeglądarki to nadal jest kwadrat. Box Model to system warstw okalających treść. Składa się z czterech elementów nałożonych na siebie w ściśle określonej kolejności.

W samym środku znajduje się content, czyli realna zawartość. Może to być akapit tekstu, zdjęcie albo kolejny zagnieżdżony div. Zaraz za nim jest padding. Otacza on zawartość ze wszystkich stron i powiększa fizyczny rozmiar elementu, na którym można kliknąć. Następnie mamy obwódkę, czyli border. To linia graniczna. Dopiero za nią rozciąga się margin, który odpycha inne pudełka, tworząc światło między sekcjami. Poniższe zestawienie pokazuje surowe zasady ich funkcjonowania.

W zeszły wtorek robiliśmy panel administracyjny dla małej hurtowni części samochodowych na wrocławskich Krzykach. Zespół zgłosił problem z przyciskami w tabeli zamówień. Użytkownicy skarżyli się, że ciężko w nie trafić kursorem. Młodszy programista próbował rozwiązać ten problem, zwiększając margin dookoła przycisku. To błąd. Odstępy między elementami wzrosły, ale sam obszar klikalny pozostał tak samo mikroskopijny. Wystarczyło zamienić margin na padding. Przycisk urósł wewnątrz, jego tło wypełniło nową przestrzeń, a kursor łapał zdarzenie kliknięcia na znacznie większej powierzchni roboczej. Tak właśnie Marginesy i dopełnienie w CSS – czym się różnią właściwości margin i padding weryfikuje się na produkcji, a nie w teorii.

Kiedy stosować margin a kiedy padding w projektowaniu stron?

Nie ma tu miejsca na przypadkowe decyzje. Wybór między odległością zewnętrzną a wewnętrzną wpływa na pozycjonowanie absolutne, responsywność i to, jak elementy zachowają się po zmianie rozdzielczości ekranu smartfona. Stosuj te reguły na sztywno.

• Używaj paddingu, gdy chcesz odsunąć tekst od krawędzi ramki, żeby nie przyklejał się do linii bocznych. Stosuj go również w elementach interaktywnych typu linki nawigacyjne i przyciski, by zwiększyć ich fizyczny obszar dotyku na urządzeniach mobilnych bez zmieniania ich pozycjonowania w siatce układu grid lub flexbox.
• Używaj marginesów do oddzielania od siebie niezależnych sekcji.

Widzę często kod, w którym ktoś próbuje wyśrodkować tekst wewnątrz przycisku za pomocą marginesów. Przeglądarka po prostu wypchnie cały przycisk w bok. Do kontrolowania relacji wnętrza służy dopełnienie. Marginesy to narzędzie do zarządzania makro-układem strony. Odpowiadają za to, jak daleko nagłówek artykułu leży od pierwszego akapitu i jak mocno stopka odsuwa się od głównej treści.

Dlaczego marginesy pionowe się zapadają (margin collapsing)?

To mechanizm, który doprowadza do furii każdego, kto po raz pierwszy próbuje ułożyć pionowy stos elementów. Zjawisko zapadania się marginesów występuje tylko w osi pionowej. Jeśli masz dwa akapity leżące jeden pod drugim, i górny ma ustawiony margin-bottom na 20 pikseli, a dolny ma margin-top na 30 pikseli, intuicja podpowiada, że odstęp między nimi wyniesie 50 pikseli. Przeglądarka liczy to inaczej. Marginesy się łączą. Zwycięża wartość większa. Ostateczny odstęp wyniesie równe 30 pikseli.

Chociaż prawdę mówiąc brakuje nam twardych danych historycznych, dlaczego twórcy specyfikacji CSS z W3C podjęli taką decyzję w latach dziewięćdziesiątych, wydaje się to logiczne z punktu widzenia składu tekstu. Chodziło o uniknięcie podwójnych, nienaturalnych przerw między blokami tekstu w długich artykułach. Zapadanie nie występuje jednak zawsze. Wystarczy, że nadasz elementowi właściwość float, zmienisz jego pozycję na absolutną lub umieścisz go w kontenerze typu flex, a mechanizm zapadania zostanie natychmiast wyłączony. Wtedy cały twój precyzyjny układ po prostu WYBUCHA w przeglądarce, jeśli polegałeś na tym zachowaniu.

Jak padding wpływa na szerokość i wysokość elementu?

Domyślne zachowanie przeglądarek jest bezlitosne dla matematyki frontendowej. Jeśli zadeklarujesz, że twój div ma mieć szerokość 300 pikseli, a następnie dodasz mu padding-left na 20 pikseli i padding-right na 20 pikseli, jego całkowita fizyczna szerokość na ekranie wyniesie 340 pikseli. Dopełnienie dodaje się do bazowych wymiarów. To samo dotyczy obramowania. Dodaj jednopikselowy border, a zrobisz z tego 342 piksele.

Zastanawiacie się zresztą, dlaczego to na produkcji tak wyje na testach po drodze? Sam się nad tym borykałem dzisiaj u siebie we wtorek. Próbujesz zmieścić w rzędzie trzy kolumny, każda po 33.33% szerokości. Wygląda idealnie. Potem klient prosi o dodanie odrobiny oddechu wewnątrz kart. Dodajesz padding. Ostatnia kolumna natychmiast spada do nowego rzędu, niszcząc cały layout. Dzieje się tak, ponieważ marginesy i dopełnienie w CSS domyślnie rozpychają element na zewnątrz jego deklarowanych wymiarów.

W jaki sposób właściwość box-sizing modyfikuje wymiary elementów?

Żeby naprawić opisany wyżej problem dodawania wymiarów, musimy ingerować w sam rdzeń silnika CSS. Służy do tego właściwość box-sizing. Domyślnie przyjmuje ona wartość content-box. Oznacza to, że zadeklarowana szerokość dotyczy tylko samej zawartości, a cała reszta jest doliczana na zewnątrz.

My zmieniamy te zasady na robocie. Od razu na starcie każdego projektu wrzucamy reset wymuszający wartość border-box. Kiedy ustawisz box-sizing: border-box, przeglądarka zmienia matematykę. Jeśli każesz elementowi mieć 300 pikseli szerokości i dasz mu 20 pikseli paddingu z każdej strony, przeglądarka ściśnie samą zawartość do 260 pikseli, by utrzymać twarde ramy 300 pikseli dla całości. Narzędzia deweloperskie (DevTools) w Chrome pokażą to wyraźnie, rysując zielone pole dopełnienia wcinające się do wewnątrz niebieskiego pola treści. Marginesy nadal pozostają poza tym równaniem i funkcjonują w pełni niezależnie.

Prawda jest zresztą absolutnie taka, że połowa frontendowców pisze ten kod na czuja. Siedzisz nad inspektorem w Chrome, klikasz strzałkę w górę przy wartościach i patrzysz, czy div w końcu przestał uciekać za ekran. Nikt normalny nie liczy pikseli w pamięci, kiedy terminy gonią a klient dzwoni z pretensjami o rozjechane logo na mobilce. Wrzucasz border-box na wszystko przez selektor gwiazdki i nagle układ zaczyna być przewidywalny. Marginesy i dopełnienie w CSS – czym się różnią właściwości margin i padding to jedno, ale to box-sizing ratuje przed załamaniem nerwowym.

Jakie są najczęstsze błędy przy ustawianiu odstępów na stronach WWW?

Ludzie nagminnie używają marginesów ujemnych w sytuacjach, które wymagają innej architektury kontenerów. Owszem, margin-top: -50px pociągnie element do góry, nakładając go na poprzedni blok. Czasami to pożądany efekt wizualny. Znacznie częściej to jednak łatanie dziur w źle napisanym kodzie, co kończy się całkowitym chaosem przy zmianie rozmiaru okna przeglądarki.

Kolejny grzech to nadużywanie jednostek sztywnych, takich jak piksele. Kiedy budujemy interfejsy dla rozdzielczości od 320px do 4K, deklarowanie padding: 100px na sekcji to proszenie się o kłopoty. Na smartfonie ten bufor zje połowę dostępnego miejsca, zostawiając na treść wąski pasek pośrodku. Wprowadziliśmy jednostki relatywne. Używaj rem dla marginesów typograficznych, a procentów lub jednostek viewportu (vw, vh) dla dużych sekcji strukturalnych.

Skrócony zapis odstępów – jak czytać wartości?

Zarówno margin, jak i padding można zapisywać w formie skróconej. Zamiast pisać cztery oddzielne linijki kodu dla góry, prawej, dołu i lewej strony, spinamy to w jedną deklarację. Przeglądarka czyta te wartości zgodnie z ruchem wskazówek zegara, zaczynając od godziny dwunastej.

Zapis margin: 10px 20px 15px 5px; oznacza kolejno: 10 pikseli od góry, 20 z prawej, 15 od dołu i 5 z lewej. Jeśli podasz tylko trzy wartości, np. padding: 10px 20px 15px, przeglądarka założy, że lewa strona ma być równa prawej, więc wyniesie 20 pikseli. Przy dwóch wartościach (margin: 10px 20px) pierwsza odpowiada za oś pionową (góra i dół), a druga za poziomą (lewo i prawo). Podanie jednej wartości aplikuje ją bezwzględnie z każdej ze stron.

Dlaczego padding nie działa na elementach inline?

To kolejna pułapka. Znaczniki takie jak span, a, czy strong to z definicji elementy śródliniowe (inline). Mają one specyficzną relację z przestrzenią. Jeśli nadasz elementowi inline padding-top lub padding-bottom, przeglądarka technicznie go wyrenderuje. Zobaczysz kolor tła rozlewający się w górę i w dół. Jednak ten dołożony obszar nie odepchnie innych elementów w dokumencie. Po prostu nałoży się brutalnie na tekst w linijce wyżej lub niżej.

Marginesy pionowe na elementach inline są z kolei całkowicie ignorowane. Nie robią nic. Żeby zmusić odległości zewnętrzne i wewnętrzne do poprawnego działania w osi pionowej, musisz zmienić typ wyświetlania elementu za pomocą display: block lub display: inline-block. Ten drugi wariant pozwala zachować element w linii tekstu, ale nadaje mu fizyczne właściwości pudełka, zmuszając sąsiednie linie do ustąpienia miejsca.

Jak poprawnie resetować marginesy i dopełnienia w przeglądarkach?

Każda przeglądarka internetowa ma swój własny, wbudowany arkusz stylów. Nazywamy to User Agent Stylesheet. Zanim napiszesz choćby linijkę własnego CSS, przeglądarka już nałożyła domyślne marginesy na nagłówki h1, akapity, a także padding na listy ul. Te wartości różnią się w zależności od tego, czy używasz Chrome, Safari czy Firefoxa. Jeśli tego nie wyczyścisz, strona będzie wyglądać inaczej na każdym urządzeniu.

Najszybsza metoda to tzw. twardy reset za pomocą selektora uniwersalnego. Wrzucasz na samą górę pliku CSS kod zerujący wszystko do zera. Dopiero na tak przygotowanej, czystej karcie zaczynasz budować własny system odległości, precyzyjnie operując wiedzą o tym, czym się różnią właściwości margin i padding.

Zamiast polegać na starych metodach, w nowoczesnych projektach integrujemy biblioteki typu Normalize.css. One nie usuwają wszystkiego bezmyślnie, ale wyrównują różnice między przeglądarkami, zachowując sensowne wartości bazowe dla typografii. Daje to znacznie czystszy punkt wyjścia dla dewelopera.

Otwórz teraz swój projekt. Znajdź pierwszy lepszy kontener, który sprawia problemy na smartfonie. Usuń wszystkie zadeklarowane marginesy i wyzeruj dopełnienie. Zobacz, jak przeglądarka renderuje nagi kod HTML. Potem zacznij powoli dodawać padding od wewnątrz, by treść zaczęła oddychać. Na sam koniec odsuń ten naprawiony blok od reszty za pomocą marginesu. Gwarantuję, że nagle cały layout przestanie pękać w szwach przy przewijaniu.

Najczęściej zadawane pytania (FAQ)

• Czy margin może przyjmować wartości ujemne?
  Tak. Wartości ujemne marginesów są w pełni poprawne z punktu widzenia specyfikacji CSS. Powodują one przyciąganie elementów do siebie lub ich celowe nakładanie, zamiast ich odpychania.
• Czy padding może być ujemny?
  Nie. Przeglądarki ignorują ujemne wartości dopełnienia. Padding musi wynosić zero lub więcej. Nie można fizycznie skurczyć przestrzeni wewnętrznej poniżej granicy wyznaczonej przez samą treść kontenera.
• Co to jest margin collapsing?
  To zjawisko łączenia się dwóch pionowych marginesów sąsiadujących elementów w jeden. Ostateczny odstęp jest równy większej z dwóch stykających się wartości, a nie ich sumie. Działa to tylko w osi Y.
• Jak wyśrodkować element używając marginesów?
  Należy nadać elementowi konkretną szerokość (np. width: 50%), a następnie zastosować regułę margin: 0 auto. Przeglądarka automatycznie podzieli dostępną pustą przestrzeń po równo na lewą i prawą stronę.
• Dlaczego tło elementu wchodzi pod padding, a pod margin nie?
  Wynika to z samej definicji Box Model. Padding jest integralną częścią wnętrza elementu i dziedziczy jego właściwości wizualne. Margines to przestrzeń zewnętrzna, która zawsze pozostaje transparentna i pokazuje tło elementu nadrzędnego (rodzica).
• Kiedy używać jednostek procentowych w odstępach?
  Jednostki procentowe w marginesach i dopełnieniach są obliczane na podstawie szerokości elementu rodzica. Dobrym pomysłem jest ich stosowanie w układach responsywnych, gdzie odległości muszą płynnie rosnąć lub maleć w zależności od rozmiaru ekranu urządzenia.

Bibliografia:

1. World Wide Web Consortium (W3C) – https://www.w3.org
2. Mozilla Developer Network (MDN) – https://developer.mozilla.org
3. web.dev (Google) – https://web.dev
4. CSS-Tricks – https://css-tricks.com