Kolor tekstu to jedna z tych właściwości CSS, które łatwo dziedziczą się z elementu nadrzędnego na potomne. Ustawiasz kolor na kontenerze i nagle cała jego zawartość przyjmuje tę barwę – o ile nie zostanie nadpisana. To wygodne i intuicyjne. Inaczej jest z paddingiem i marginesem. Gdy ustawisz padding na rodzicu, dzieci nie dostaną automatycznie wewnętrznego odstępu. Podobnie z marginesem – nie przenosi się na elementy potomne. Wynika to z fundamentalnej różnicy między właściwościami dziedziczonymi a tymi, które dotyczą samego pudełka elementu. Warto zrozumieć, dlaczego tak się dzieje, bo pozwala to uniknąć frustracji podczas stylowania layoutu.

Właściwości takie jak kolor, font-family czy line-height są dziedziczone, ponieważ odnoszą się do sposobu prezentacji tekstu i innych treści wewnątrz elementu. Z kolei padding, margin, border czy background-color opisują sam element jako blok – jego rozmiar, odstępy zewnętrzne i wewnętrzne. Te cechy nie mają sensu w kontekście dzieci, bo każde z nich ma własne pudełko. Dziedziczenie właściwości (jak wyjaśniają to zagadnienia związane z dziedziczeniem właściwości) dotyczy tylko wybranych atrybutów, głównie tych związanych z tekstem. Można to łatwo sprawdzić w dev toolsach – po zaznaczeniu dziecka w drzewie DOM zobaczysz, że padding rodzica nie pojawia się w obliczonych stylach potomka.

Istnieją jednak sposoby, by osiągnąć podobny efekt bez polegania na dziedziczeniu. Jeśli chcesz, aby wszystkie dzieci miały taki sam wewnętrzny odstęp, możesz użyć uniwersalnego selektora potomków, np. .rodzic > * { padding: 10px; }. Inną opcją jest zastosowanie display: flex z gap na rodzicu – wtedy odstępy między dziećmi są kontrolowane centralnie, choć to nie to samo co padding. Można też użyć zmiennych CSS i przypisać je do konkretnych elementów. Warto pamiętać, że marginesy pionowe potrafią się zapadać (margin collapsing), co dodatkowo komplikuje sprawę. Zrozumienie tych mechanizmów pozwala świadomie projektować odstępy i unikać nieprzewidzianych efektów.

Podsumowując, padding i margin nie działają jak kolor na elementach potomnych, ponieważ nie są właściwościami dziedziczonymi. Odnoszą się do geometrii konkretnego pudełka, a nie do treści w nim zawartej. Kolor tekstu dziedziczy się, bo jest cechą prezentacji znaków – i to ma sens. Gdy potrzebujesz, aby dzieci przejęły odstępy, musisz zastosować jawne reguły CSS, selektory potomków lub flexbox z gap. Świadomość tych różnic to podstawa skutecznego stylowania i debugowania layoutu.