Szél Péter

Nemrégiben munkám során egy olyan CSS hibára akadtam, amely igen meglepő volt – olyan helyen volt üres terület, ahol látszólag semmi (pl. margin vagy padding) nem indokolta. Ráadásul nem böngésző hibáról volt szó, megnéztem Chrome-ban és Internet Explorerben is, mind a kettőben jelentkezett a hiba.

Az alábbi leegyszerűsített példa mutatja a hibajelenséget, a felső, szürke hátterű doboz alatt kimarad egy kis üres terület, holott ennek a doboznak nincs alsó margója, és a benne lévő tartalom sem lóg túl rajta, az nem okozhatja a hibát.

See the Pen XJNXYx by Szél Péter (@szelpe) on CodePen.

Az üres hely:

Üres hely marad a szürke doboz alatt

Az doboz tartalma jóval kisebb, mint a magassága, nem lóg túl:

A doboz tartalma jóval kisebb

Ha van egy kis kedved és időd, töprengj el azon, mi okozhatja a hibát, nézegesd meg egy fejlesztői eszközzel. Ha végeztél, akkor görgess lejjebb, vagy kattints a linkre a megoldásért!

A megoldásért kattint ide!

Megoldás

A megoldás nyitja a margó összeomlás. A linkelt szabvány marha bonyolultan írja le, a lényeg leegyszerűsítve az, hogy a szomszédos dobozok margója összeolvad, egy közös margót alkotva, ha nincs közöttük semmi (se tartalom, se padding, se border).

Egyszerű példa

A margó összeomlás legegyszerűbb esete, ha két egymást követő testvér elem margójával következik be:

See the Pen OPbMaW by Szél Péter (@szelpe) on CodePen.

A fenti példában a felső doboz alsó margója olvad össze az alsó elem felső margójával. Logikus, hiszen mind a két esetben azt vártuk el, hogy maradjon 10px üres terület az elem után/előtt, ez valóban teljesül.

Komplexebb eset

Érdekes módon, margó összeomlás történhet szülő–gyermek elemek találkozásánál is. Például, ha egy szülő legelső gyermekének van felső margója, akkor az a megfelelő feltételek teljesülése esetén átruházásra kerül a szülőre:

See the Pen dPOGwy by Szél Péter (@szelpe) on CodePen.

Meglepő, de igaz

Ennek egyik speciális esete az elsőként mutatott példa, amikor a szülő alsó margója olvad össze az utolsó gyermek margójával, de csak akkor, ha a szülő magassága automatikusan számítódik (így ha a min-height-ot átírjuk height-ra, akkor megszűnik a hiba).

Nem történik összeomlás abszolút pozícionált és floatolt elemeken, vagy ha az overflow != visible. Én az utóbbi megoldást választottam a bug kijavítására, beállítottam az overflowt autora, az én esetemben semmi gondot nem okozott ez a beállítás.

Ha nálad az overflow: auto nem opció valami miatt, akkor nehezebb a dolgod. Általában az abszolút pozícionálás és a floatoltatás még kevésbé fog megoldást nyújtani, hisz ezek teljesen átalakítják az oldalad kinézetét. Olyan trükköket lehet elkezdeni alkalmazni, mint pl. betenni egy   (non-breaking space-t) az utolsó gyermek elem után, így már nem az lesz az utolsó elem, azaz a margó összeomlás elmarad.

Ha tetszett és hasznosnak találtad a bejegyzést, akkor kérlek oszd meg másoknak is az alább található gombok segítségével!