Padding i margin to dwa podstawowe sposoby na odstępy w CSS, ale ich zachowanie zmienia się, gdy patrzymy na relację rodzic–dziecko. Padding rodzica powiększa jego obszar wewnątrz ramki i tym samym przesuwa zawartość do środka. Margin dziecka natomiast nie rozpycha rodzica od wewnątrz, tylko odsuwa samo dziecko od krawędzi rodzica — o ile rodzic nie ma własnego paddingu, obramowania ani nie tworzy kontekstu formatowania. W praktyce oznacza to, że margin dziecka potrafi „uciec” poza rodzica, a padding rodzica zawsze zostaje na swoim miejscu.
Najczęstszy efekt uboczny to zapadanie się marginesów. Górny margin dziecka łączy się z górnym marginesem rodzica i razem wypychają cały blok w dół, zamiast odsunąć dziecko od krawędzi. Dzieje się tak, gdy rodzic nie ma paddingu, obramowania, overflow innego niż visible ani nie jest elementem flex lub grid. Wystarczy dodać rodzicowi padding albo border, żeby margines dziecka znów działał lokalnie. Warto też pamiętać, że dziedziczenie w CSS dotyczy głównie właściwości tekstowych — o tym, jak dziedziczenie koloru i ramki wpływa na elementy potomne, przeczytasz w osobnym artykule, bo to często mylone zagadnienie.
Padding rodzica nigdy nie znika i nie łączy się z paddingiem dziecka. To daje przewidywalny efekt: wewnętrzny odstęp rodzica zawsze odsuwa dzieci od jego krawędzi, niezależnie od tego, jakie marginesy mają dzieci. Jeśli chcesz kontrolować odstępy w komponencie, bezpieczniej jest ustawić padding na rodzicu i wyzerować marginesy dzieci, zamiast liczyć na marginesy potomków. W układach flex i grid marginesy dzieci nie zapadają się, więc problem znika, ale w klasycznym przepływie blokowym nadal trzeba o tym pamiętać.
Podsumowując: padding rodzica działa jak wewnętrzna poduszka, która zawsze trzyma dzieci z dala od krawędzi. Margin dziecka to odstęp zewnętrzny, który może łączyć się z marginesami sąsiadów i rodzica. Świadome łączenie tych dwóch właściwości pozwala uniknąć nieprzewidywalnych przesunięć i sprawia, że layout zachowuje się zgodnie z oczekiwaniami.