Model pudełkowy w CSS rozróżnia właściwości dziedziczone i niedziedziczone. Kolor tekstu, font czy line-height przechodzą z rodzica na potomków, bo dotyczą bezpośrednio treści. Padding, border i margin należą do drugiej grupy — opisują pudełko elementu, a nie jego zawartość. Dlatego dziecko nie powtórzy odstępu ani ramki rodzica, nawet jeśli wizualnie wydaje się to naturalne. Warto zrozumieć to rozróżnienie, bo wiele błędów w układzie strony bierze się właśnie z błędnego założenia, że wystarczy ustawić padding na kontenerze, by objął on wszystkie elementy wewnątrz.

Praktyczny skutek jest taki, że padding rodzica tworzy przestrzeń między jego krawędzią a krawędzią potomka, ale nie wpycha treści potomka do środka jego własnego pudełka. Jeśli więc dasz sekcji padding 40 px i umieścisz w niej akapit, tekst akapitu zacznie się 40 px od krawędzi sekcji — ale sam akapit nadal ma własny padding równy zero. Gdy dodasz do akapitu tło, zobaczysz, że rozciąga się ono tylko na obszar treści, bez odziedziczonego odstępu. To samo dotyczy borderu: obramowanie rodzica nie pojawi się na dzieciach. Szczegółowe wyjaśnienie, które właściwości przechodzą na potomków, a które nie, znajdziesz w artykule o dziedziczeniu właściwości — to dobre uzupełnienie tej lektury.

Konsekwencje dla układu bywają zaskakujące. Wyobraź sobie kartę produktu z paddingiem 20 px i borderem 1 px. Wewnątrz masz tytuł, opis i przycisk. Tytuł nie odziedziczy ani paddingu, ani borderu — jego pole tekstowe zaczyna się dokładnie tam, gdzie kończy się padding karty. Jeśli chcesz, by każdy z tych elementów miał własny odstęp od krawędzi karty, musisz ustawić go osobno albo użyć flexboxa z gap. Podobnie border: obramowanie karty nie narysuje się wokół tytułu. Częstym błędem jest też oczekiwanie, że marginesy dzieci nie wyjdą poza rodzica — zjawisko collapsing margins sprawia, że margines pionowy potomka może „uciec” na zewnątrz, jeśli rodzic nie ma paddingu ani borderu. To kolejny powód, dla którego warto świadomie operować tymi właściwościami.

Najprostsze rozwiązanie to nie liczyć na dziedziczenie tam, gdzie go nie ma. Zamiast polegać na paddingu rodzica, ustaw padding bezpośrednio na elementach potomnych albo użyj gap w kontenerze flex lub grid. Border dodawaj świadomie do tych elementów, które naprawdę mają go mieć. Zrozumienie różnicy między właściwościami dziedziczonymi a niedziedziczonymi pozwala przewidzieć układ bez ciągłego poprawiania inspektora. Dzięki temu kod staje się prostszy, a debugowanie szybsze.