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 <div> 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
