Mieszanie marginesu z paddingiem, które psuje każdy układ

Gdzie najczęściej popełnia się błąd Pierwszy typowy błąd to opakowywanie w article każdego bloku z nagłówkiem. Wtedy strona główna bloga wygląda dla robota jak zbiór niezależnych publikacji, choć to tylko lista zapowiedzi. Drugi błąd to używanie section jako uniwersalnego pojemnika na wszystko. Jeśli fragment nie ma własnego nagłówka i nie tworzy spójnego tematu, lepszym wyborem będzie zwykły div — nie wprowadza bowiem sztucznej semantyki.

Kolejny problem to zagnieżdżanie section bez przemyślenia hierarchii. Każdy poziom powinien mieć własny nagłówek, a numeracja h2, h3 i h4 musi odzwierciedlać strukturę. Gdy wrzucisz trzy section pod rząd bez nagłówków, czytnik ekranu odczyta je jako puste regiony, a algorytm może uznać, że treść jest nieuporządkowana. Warto sprawdzić stronę w narzędziu do walidacji HTML i w podglądzie drzewa dostępności.

Najczęstszy błąd to stosowanie border-box tylko do wybranych elementów. Jeśli ustawisz go na kontenerze, ale nie na jego dzieciach, nadal możesz mieć niespodzianki. Najlepiej od razu ustawić globalnie: *, *::before, *::after box-sizing: border-box; . To prosty zabieg, który eliminuje większość problemów z wymiarami. Uwaga na stare skrypty lub style zewnętrzne, które mogą nadpisywać tę właściwość – sprawdź, czy nie ma konfliktów.

Warto też wiedzieć, że border-box nie działa wstecznie. Jeśli masz gotowy projekt oparty na content-box, nagła zmiana może popsować układ. Wprowadzaj ją etapami i testuj. W narzędziach deweloperskich przeglądarki możesz podejrzeć, jak liczona jest szerokość – to najszybszy sposób na weryfikację. Dzięki border-box szerokość wreszcie się zgadza, a Ty przestajesz zgadywać, ile pikseli faktycznie zajmie element.

Najprostszy test przed wdrożeniem: wyobraź sobie, że wycinasz dany fragment i wklejasz na inną stronę. Jeśli nadal jest zrozumiały, użyj article. Jeśli potrzebuje sąsiednich treści, wybierz section. Gdy nie spełnia żadnego z tych warunków, pozostań przy div. Ta jedna decyzja poprawia dostępność, porządkuje nagłówki i zmniejsza ryzyko, że wyszukiwarka błędnie zinterpretuje Twoją treść.

Każdy element w dokumencie to prostokąt otoczony trzema warstwami: od wewnątrz treścią, potem paddingiem, obramowaniem i na końcu marginesem. Padding to odstęp między treścią a ramką. Border to sama ramka, którą można pogrubić, pokolorować albo ukryć. Margin to pusta przestrzeń na zewnątrz ramki, która odsuwa element od sąsiadów. Te trzy warstwy działają równocześnie i mylenie ich to najczęstsze źródło problemów z układem.

Ustal zasadę, że modyfikator nigdy nie występuje samodzielnie. W HTML zawsze zostaje klasa bazowa: class="product-card product-card--compact". Dzięki temu selektor w CSS może być krótki i przewidywalny, a usunięcie modyfikatora nie psuje całego komponentu. Warto też trzymać się jednego poziomu podkreślników — jeśli pojawia się potrzeba drugiego, to sygnał, że komponent powinien zostać rozbity na mniejszy blok. Na przykład zamiast product-card__image__caption lepiej zrobić product-card__caption albo wydzielić osobny blok image-caption.

Sprawdź też, czy nie masz na stronie drugiego elementu z tym samym id. Przeglądarki wybierają pierwszy napotkany, więc link może prowadzić w zupełnie inne miejsce niż się spodziewasz. Pomocne bywa otwarcie narzędzi deweloperskich, wpisanie w konsoli identyfikatora i sprawdzenie, ile elementów go zwraca. Jeśli więcej niż jeden — popraw nazwy, zanim zaczniesz szukać winy w skryptach.

Przy elastycznych układach border-box upraszcza sprawę z flexboxem i gridem. Gdy ustawiasz flex-basis: 200px i padding: 15px, element nie rozpycha się ponad miarę. To samo dotyczy gridu – kolumny nie pękają, gdy dodasz obramowanie. Pamiętaj tylko, że border-box nie rozwiązuje problemów z marginesami ani z zawartością, która nie mieści się w zadanej szerokości. Jeśli treść jest szersza niż element, nadal może dojść do przepełnienia.

Border potrafi zmienić rozmiar elementu, nawet jeśli jest przezroczysty. Gruba ramka dodana w stanie hover przesuwa sąsiadów, jeśli nie zarezerwujesz na nią miejsca. Praktyka jest prosta: ustaw border o docelowej grubości od początku, a w stanie hover zmieniaj tylko kolor. Alternatywnie użyj outline, który nie wpływa na układ, albo przezroczystego borderu jako rezerwy. Nie mieszaj tych dwóch podejść w jednym komponencie, bo łatwo zgubić spójność.

Drugi częsty problem to duplikaty id. Gdy ten sam identyfikator pojawi się dwa razy, przeglądarka zwykle przejdzie do pierwszego wystąpienia, a reszta przestanie działać. Warto więc przed wdrożeniem przeszukać kod pod kątem powtórzeń. Uwaga też na znaki specjalne i polskie litery w id — część narzędzi je zakoduje, co rozjedzie się z linkiem. Bezpieczniej trzymać się prostego alfabetu.