Szétszerelje a margó összeomlását, alexdev

Jó napot, kedves olvasók!

Megérteni, hogy a CSS összeomlik. lehet, hogy az élet egy webfejlesztő sokkal könnyebb. Lássuk, hogyan működik a CSS összeomlása.

Vízszintes és függőleges margó összeomlása

A vízszintes margók soha nem buknak össze. De a függőleges dolgok nem olyan egyszerűek.

Annak megértéséhez, hogy a függőleges margók összeomlanak, hozzunk létre egy ilyen egyszerű példát.

Eredmény a böngészőben

A szomszédos elemek közötti pozitív távolság

Függőleges szomszédos margin-összeomlás. Ha két elemnek pozitív függőleges távolsága van, akkor ennek eredményeképpen az elemek között a két bemenet közül a legnagyobb lesz.

Eredmény a böngészőben

Szomszédos elemek pozitív és negatív bemélyedésekkel

Ha egy elem pozitív bemélyedéssel rendelkezik, a második negatív, az eredmény az elemek közötti behúzás összege.

Eredmény a böngészőben

Ha a behúzás mennyisége negatív, akkor az utolsó elem átfedi az elsőt. Lássuk ezt az alábbi példában.

Eredmény a böngészőben

A szülő és a gyermek behúzása

Ha a szülőnek nincs határvonala vagy kitöltése. akkor a szülő és a gyermek beékelődése összeomlik, és az eredmény lesz a két bemélyedés közül a nagyobb.

Eredmény a böngészőben

Hogyan szüntessük meg a szülő és a gyermek elemek margó összeomlását?

Az összeomlás eltávolításához be kell állítania a szülőelemet a szegélyre vagy a kitöltésre.

Eredmény a böngészőben