Margin collapsing

Určite ste sa s týmto podivným javom stretli. Správanie marginov je špecifikáciou CSS definované tak, že navonok vyzerá ako by mali všetky browsery nejaký zlý bug. Prečo vám kvôli nemu vznikajú diery v designe sa dozviete v tomto článku.

Predstavte si, že chcete dať do bočného stĺpca na stránke nejaký ten "chlievik" ako je na obrázku, kde má byť hlavička pekne spojená s obsahom. Ak by ste použili len marginy, dopadli by ste takto biedne ako ja na druhom obrázku.

Vychádzame z nasledovného kódu (CSS je v komentároch), ktorý by úplne fungoval, keby žijeme vo svete s logickejšou špecifikáciou CSS. ;)

<div class="box_heading">Hlavička</div> <!-- padding:8px -->
<div class="box_content"> <!-- margin-left:8px -->
	<h3>Podnadpis</h3> <!-- margin:8px -->
	<p>Blabla<br>Kecy</p> <!-- margin:8px -->
</div>

Prečo je teda medzi sivým a zeleným obdĺžnikom medzera, keď ani jeden z nich nemá takéto správanie definované v CSS? Ako by sa dalo čakať v článku o collapsing marginoch, môžu za to collapsing marginy.

To je koncept, ktorý pôvodne vznikol s dobrým úmyslom a dopadol tak, že akurát domýlil kopec ľudí namiesto toho aby im pomohol. Nápad bol taký, že keď máte pod sebou odstavce, ich marginy by sa mali prekrývať:

Každý odstavec v ukážke má margin 10 pixelov zhora aj zdola a nadpis až 20 pixelov. Nastáva "kolaps" marginov a spájajú sa do jedného spoločného, ktorý ma veľkosť väčšieho marginu. Autori CSS totiž predpokladali, že autori stránok budú predpokladať, že keď zadajú margin 10 pixelov, tak chcú proste medzeru o veľkosti 10 pixelov. V prípade blokov textu dáva takéto správanie ešte celkom zmysel.

Horšie je, že ku kolapsu dochádza nielen pri susediacich elementoch ale aj pri vnorených. A na to už nemám žiadne vysvetlenie. Netuším čo mohlo behať hlavami tvorcov keď vymysleli takúto hovadinu. :) V nasledujúcej ukážke vidíte ako vyzejú do seba vnorené elementy s marginami:

Všimnite si, že horizontálny margin sa chová normálne a iba vertikálny má nejaké nekalé úmysly. Všetky vertikálne marginy sa spojili do jedného 10-pixelového, ktorý pretŕča cez najvyšší element. To nie je bug, to je feature.

Z tejto ošemetnej™ situácie sa vieme dostať viacerými spôsobmi. Prvým a najspoľahlivejším je vloženie niečoho medzi marginy. Tým niečím môže byť buď padding alebo rámik (border). S paddingom 1px zhora aj zdola by už vyzerali obdĺžniky normálne (samozrejme s miernym rozšírením o 2 pixely):

/* predtym */
div.obdlznik { margin: 5px; }

/* potom */
div.obdlznik { margin: 5px; padding: 1px 0px; }

Druhým riešením je nastavenie floatu postihnutému elementu a jeho následné "clearnutie". Floaty totiž z nejakého dôvodu nepodliehajú collapsingu. Toto riešenie nie je až také dobré z hľadiska, že vyžaduje viac písania a clear element navyše, ale zíde sa, ak sa ocitnete v situácii, kedy proste nemôžete použiť paddingy alebo rámiky, lebo sa zrúti svet.

/* original */
div.hlavicka { background: #75ac00; padding: 8px; color: #fff; }
div.obsah { background: #e0e0e0; margin-left: 8px; }
div.obsah h3 { margin: 8px; }

/* riesenie s floatom */
div.obsah h3 { margin: 8px; float: left; }
div.clear { clear: left; } /* tento element musi nasledovat za podnadpisom */

/* riesenie s paddingom */
div.obsah { background: #e0e0e0; margin-left: 8px; padding: 1px 0; }

Nebol by to Internet Explorer, keby situáciu trocha nezamotal. IE6 a 7 ignorujú collapsing ak má element "layout". Layout je Microsoftovský výmysel, ktorý element získa napríklad keď má nastavené pevné rozmery alebo s magickým príkazom zoom:1. Pro tip na záver: ak náhodou nepoznáte zoom:1, je to magický liek pre IE6 (a 7), čo sám o sebe viac menej nič nerobí, iba "ruší" niektoré bugy.