https://jsfiddle.net/wx2fw3mh/3/
Dlaczego zmiana paddingu div.menu z 0px do 1px rozciąga div.menu? Spodziewałem się, że:
- div.menu powiększy się o 1px w każdym kierunku.
- zostanie dodany 1px pomiędzy "granicą" div.menu, a
.
0
0
Magia css-a.
Związane jest to z tym, że <p> jest pierwszym elementem w <div> i posiada (domyślnie) jakiśtam margin-top. Wtedy tło rodzica szaleje (sprawdź sobie na tłach-obrazkach). Nie wiedziałem, że jak dodamy do tego padding u rodzica to robi się jeszcze większa magia ;)
Skoro wszystkie przeglądarki powielają ten schemat - zapewne ma to swoje logiczne wyjaśnienie - trzeba by było szukać w opisach standardów W3.
margin-top first element w Google daje sporo rezultatów, może tam naprędce znajdziesz dlaczego tak jest.