[html/css] Dziwne zachowanie marginesów


(WooQash) #1

(batmomobil) #2

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


(WooQash) #3

No dobrze, ja to wiem. Tylko czemu to oddziałuje na zewnątrz? W skrócie czemu czerwony obniża niebieskiego?


(batmomobil) #4

Dodaj do

o to chodzi.


(WooQash) #5

Dziwne, jeżeli wpiszę "padding-top:1px" to przerwa (padding) od góry do czerwonego wynosi 11px:

image_id: 4225

a jak nie ma albo wpiszę "padding-top:0px" to jest 0px, ale 10px marginesu

image_id: 4226

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:

image_id: 4227


(batmomobil) #6

(tomms) #7

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