Bună ziua, dragi cititori!
Înțelegerea modului în care se produce colapsul în CSS. poate face viața un dezvoltator web mult mai ușor. Să vedem cum funcționează colapsul marjei în CSS.
Marginarea marginii orizontale și verticale
Marginile orizontale nu se prăbușesc niciodată. Dar cu lucrurile verticale nu sunt atât de simple.
Pentru a înțelege modul în care marjele verticale se prăbușesc, să realizăm un exemplu simplu.
Rezultă în browser
Spațierea pozitivă între elementele adiacente
Verificarea colapsului marginal adiacent. Dacă două elemente au o spațiere pozitivă verticală, atunci, ca rezultat, linia dintre elemente va fi cea mai mare dintre cele două liniuțe.
Rezultă în browser
Elemente adiacente cu linii pozitive și negative
Dacă un element are o indentare pozitivă, iar al doilea este negativ, rezultatul va fi cantitatea de umplutură între elemente.
Rezultă în browser
Dacă valoarea indentării este negativă, ultimul element se va suprapune pe primul. Să vedem asta în exemplul de mai jos.
Rezultă în browser
Împușcând linia părintelui și a copilului
Dacă părintele nu are o margine sau un padding. atunci indentarea părintelui și a copilului se va prăbuși și rezultatul va fi cea mai mare dintre cele două liniuțe.
Rezultă în browser
Cum se elimină marja de colaps a elementelor părinte și copil
Pentru a elimina restrângerea, trebuie să setați elementul părinte la margine sau la umplutură.
Rezultă în browser
Trimiteți-le prietenilor: