Margin jest to odstęp zewnętrzny,a padding wewnętrzny odstęp elementu.Nie wszystkie przeglądarki tak samo interpretują margin odległości i będą ci przesuwać element.Poczytaj tohttp://szablonik.blox.pl/html/1310721,262146,21.html?493726 i to http://www.kurshtml.edu.pl/css/model_pudelkowy,marginesy.html
No dobrze, ja to wiem. Tylko czemu to oddziałuje na zewnątrz? W skrócie czemu czerwony obniża niebieskiego?
Dodaj do
o to chodzi.
Dziwne, jeżeli wpiszę “padding-top:1px” to przerwa (padding) od góry do czerwonego wynosi 11px:
a jak nie ma albo wpiszę “padding-top:0px” to jest 0px, ale 10px marginesu
Na dodatek przerobiłem kod tak by czerwony i żółty div były połowami niebieskiego wliczając w to ich marginesy 10px, jak widać na obrazkach wyżej nie wygląda to tak jak powinno, czyli:
To zachowanie marginesów nazywa się collapsing margins (zapadanie marginesów)
http://www.w3.org/TR/CSS2/box.html#collapsing-margins
W skrócie są dwa rodzaje zapadania:
-
pomiędzy sąsiednimi elementami
-
pomiędzy rodzicem i dzieckiem (tak jak u ciebie)
W drugim przypadku aby wyłączyć zapadanie można ustawić border albo padding tak jak podawałeś lub dla rodzica ustawić overflow: hidden