Kúzlo menom záporný margin

František Haško  /  30. 05. 2007, 00:00

Vlastnosť margin určuje, ako "ďaleko" má byť okolitý obsah od elementu. To pre vás pravdepodobne nie je žiadna novinka. Vedeli ste však, že margin môže byť nastavený na zápornú hodnotu? Tento článok je o výhodných vlastnostiach a riešeniach, ktoré nám táto možnosť prináša.

Záporný margin?


Angličtinu znalí užívatelia si môžu v špecifikácii vlastnosti margin overiť, že táto možnosť je skutočne povolená a tým pádom je aj validná. Naproti tomu pri vlastnosti padding musíme zadávať vždy iba nezáporné hodnoty. Margin aj padding sú vlastne nejaké "vzdialenosti". Margin je vzdialenosť okraja (border) elementu od ostatných elementov, padding je vzdialenosť elementu od jeho vlastného okraja (vlastne nejaká medzera). Prečo teda margin záporny byť môže a padding nie? Odpoveď je jednoduchá - okraj elementu nemôže tento element prekrývať. A to nám aj napovedá, na čo budeme záporny margin používať - elementy sa navzájom prekrývať môžu.

Float model


Dobre, takže ako využijeme prekrývanie? Nuž, mnohými spôsobmi. Všetky však súvisia použitím vlastností float a clear (reč o nich bola v predchádzajúcom článku o tvorbe fixného layoutu). Vieme, že ak napíšeme takýto kód

<div id="prvy">obsah prveho bloku</div>
<div id="druhy">obsah druheho bloku</div>
#prvy {
float:left;
width:100px;
height:100px;
border: 1px solid black;
margin-right:15px;
}
#druhy {
width:100px;
height:100px;
border: 1px solid red;
}

tak získame pomerne očakávaný výsledok - elementy budú vzdialené 15px. Ak nastavíme margin-right:0; tak budú tieto dva bloky tesne vedľa seba. Ak však nastavíme margin-right:-10px; tak sa druhý blok posunie ešte bližšie k prvému - t.j. ho začne prekrývať. Ak pridáme aj margin-top, tak môžeme získať zaujímavé prekrytie. A s tým sa dá "hrať" veľmi jednducho ďalej - na stránke s ukážkami si pozrite štvrtý príklad, kde sa prekrývajú tri elementy.
pozrite si ukážky naživo

Praktické ukážky a námety


Čo s tým? Prekrývajúce sa štvorce sú fajn, no možno až tak úplne neodhaľujú silu záporného marginu. Najprv sa pozrime na dve "hračky". Nejde ani tak o ich skutočnú použiteľnosť, ako o netradičnú ukážku, čo sa dá so zápornymi marginmi urobiť (a kde by sme väčšinou použili vlastnosti position - to mimochodom nie je vždy veľmi efektívne).

"Tieňované" písmo


pozrite si ukážku tieňovaného textu

Ako to funguje? V zásade jednoducho. Položíme na seba ten istý text viac krát, pričom bude stále inej farby na jemne inej pozícii. Úloha skoro nutne potrebuje position:absolute. Pamätníci si možno spomenú na článok J. Koska o CSS, kde približne v druhej tretine článku z roku 1998 (!) popisuje vytvorenie takéhoto "obrázku". Kód je relatívne dlhý a nepekný - hlavný problém však je, že keďže využíva position: absolute, tak nemôže byť umiestnený do prirodzeného toku textu, musí byť umiestnený "na pevno" na stránku. Moje riešenie využíva iba margin a padding (samozrejme hlavne ten záporný margin). Ak vás zaujíma zdrojový kód, otvorte si ho na stránke príkladu (štýly sú priamo v dokumente).

Manipulujeme s poradím textu


Je možné zobraziť dva za sebou idúce riadky v opačnom poradí?

pozrite si ukážku prehodenia riadkov

Samozrejme a to aj s pomocou záporneho marginu. Riešenie je jednoduché - pre prvý odsek nastavíme dvojnasobný záporný margin-bottom (druhý odsek sa tým posunie nad neho) a ešte ho posunieme nižšie, aby mal druhý odsek dosť miesta. Ešte malá poznámka - ak využijeme jednotku em, tak to bude fungovať aj pri zväčšení písma.

Niečo použiteľnejšie


pozrite si ukážku prispôsobivého layoutu

Záporny margin má samozrejme aj oveľa širšie využitie, ako na tvorbu takýchto hračiek a to hlavne pri tvorbe prispôsobivého layoutu. Upravme kód, ktorý sme použili na začiatku do tejto podoby:

<div id="prvy">
 <div id="prvy-dnu">obsah prveho bloku</div>
</div>
<div id="druhy">obsah druheho bloku</div>
#prvy {
float:left;
width:200px;
height:100px;
background-color:white;
border: 1px solid black;
margin-right:-50px;
}
#prvy-dnu {
float:left;
margin-right:60px;
width:100%;
height:50px;
border: 1px solid black;
}
#druhy {
background-color:#00c;
width:50px;
height:100px;
border: 1px solid black;
}

Výsledok, ktorý dostaneme, nie je na prvý pohľad nijako výnimočný - sú to opäť dva stĺpce textu, len sme pri nich využili ešte o jeden blok &lt;div&gt; viac. Podstatné, čo si musíme všimnúť je to, že teraz nezáleží na veľkosti prvého bloku - môže byť nastavený na pevnú veľkosť, ale aj na premenlivú šírku (percentami). Tým sme dokázali pomocou záporného marginu vytvoriť jednoduchý prispôsobivý layout.

Techniku tvorby prispôsobivého layoutu rozoberiem podrobnešie v ďalšom článku. Pre záujemcov však poskytnem ešte jeden zaujímavý odkaz. Možno ste už niekedy uvažovali, že by nebolo zlé mať patičku stránky na spodnom okraji obrazovky bezohľadu na to, či je obsah dostatočne dlhý. V CSS (skoro) nič nie je nemožné, môžete si pozrieť riešenie (v angličtine) takejto pätičky. Jeden zo základných kameňov kódu je ako inak aj záporný margin ;-).

František Haško

Neprehliadnite: