Vonkajšie a vnútorné okraje elementov
Pri predchádzajúcich ukážkach ste si možno všimli, že pri použití orámovania pri dive a obzvlášť pri použití väčšej hrúbke čiar, bol obsah divu (text) príliš blízko orámovania. V podstate bol ten obsah nalepený úplne na čiare a na pohľad to nevyzerá pekne. Pre lepšiu prehľadnosť/vzhľad je možné zadať v jazyku CSS vnútorné okraje elementov pomocou vlastnosti padding (padding – výplň). Vnútorným okrajom sa myslí vzdialenosť, ktorú budeme zadávať v pixeloch, medzi hranou (orámovaním) elementu a jeho vnútorným obsahom, ktorý sa v elemente zobrazuje. V našom prípade to bola vzdialenosť textu od čiary orámovania divu. V skutočnosti vytvorí toto pravidlo bielu plochu o hrúbke/vzdialenosti zadaných pixelov od orámovania do vnútra elementu, takže bude tento priestor prázdny a obsah sa v ňom nezobrazí. V podstate je to niečo podobné, ako keď v textových editoroch (napr. Microsoft Word) tvoríte textový dokument, ale okolo textu na papieri sú okraje, aby text nešiel od úplnej hrany zo všetých strán. Okolo textu je vytvorená biela plocha aj zhora, aj sprava, aj z dola aj zľava. Presne toto isté je vlastnosť padding v jazyku CSS.
Táto vlastnosť sa v praxi využíva pri väčšine elementov na stránke. Zadávanie pravidiel pre túto vlastnosť funguje podobne ako pri vlastnosti border. Môžeme ju zadať naraz pomocou názvu vlasnosti padding, ktorej hodnotou sú postupne 4 číselné hodnoty so skratkou px (pre pixely). Priradenie hodnôt je podobné ako pri jednotlivých vlastnostiach property border (napr. border-style a pod.), čiže hore, vpravo, dole, vľavo. Samozrejme je možné použiť aj skrátené spôsoby, rovnako ako sme si ich zadávali pri border. Teda je možné zadať iba tri hodnoty, dve alebo jednu pre všetky strany. Okrem toho je možné zadávať aj túto vlastnosť jednotlivo pre strany vlastnosťami padding-top, padding-right, padding-bottom a padding-left. Poďme si to ukázať:
<!DOCTYPE html>
<html>
<body>
<div style="border: 1px solid; width: 300px;">
<div style="border: 1px solid;">Div 1</div>
</div><br>
<div style="border: 1px solid; padding: 40px; width: 300px;">
<div style="border: 1px solid;">Div 2</div>
</div><br>
<div style="border: 1px solid; padding: 5px 10px 20px 30px; width: 260px;">
<div style="border: 1px solid;">Div 3</div>
</div><br>
<div style="border: 1px solid; padding: 40px;">
<div style="border: 1px solid;">Div 4</div>
</div><br>
<div style="border: 1px solid; padding-top: 10px; padding-left: 20px; width: 300px;">
<div style="border: 1px solid;">Div 5</div>
</div><br>
</body>
</html>
Poďme si troška podrobnejšie rozobrať poslednú ukážku. Pri prvom dive sme nepoužili vlastnosť padding. Vo všetkých divoch sme použili orámovanie obidvom divom, aj rodičovskému (nadradenému) aj vnútornému pre lepšie pochopenie. Keďže v rodičovskom nie je zadaná vlastnosť padding, medzera medzi vonkajším divom a vnútorným je 0 pixelov, tým pádom sa orámovania týchto dvoch divov spojili, pretože sú hneď pri sebe a vytvorili hrubšiu čiaru, medzera medzi nimi nie je žiadna. Pri druhom dive sme použili zadanie padding rovnaké pre všetky 4 strany (jednou hodnotou). Vo výsledku je vidieť 40 pixelový vnútorný okraj (odsadenie) okolo vonkajšieho divu, medzi divmi (vonkajším a vnútorným) je 40 pixelový prázdny priestor. V treťom dive sme použili zadanie paddingu pre všetky 4 strany odlišne a pri piatom dive sme použili zadanie paddingu iba pre dve strany.
Pozrite sa teraz vo výsledku lepšie na rozmer prvého a druhého divu. Obidva majú zadaný rozmer pomocou vlastnosti width (height teraz neriešime...), ich šírka však nie je rovnaká. Je to preto, pretože vlastnosť padding rozširuje, resp. navyšuje daný rozmer elementu o hodnoty zadané v paddingu. Toto je veľmi dôležitá informácia, pretože pri písaní kódu v jazyku CSS sa vo väčšine všetko ráta presne na pixely. Po zadaní paddingu však treba vždy myslieť na to, že hodnoty paddingu zvýšia rozmery, takže ak sme mali elementy presne napasované, zadanie tejto vlastnosti a následné neupravenie rozmerov nám usporiadanie elementov rozhádže, pretože tie zväčšené možno nebudú mať miesto. Preto ak chceme zachovať skutočný rozmer, aký sme pôvodne chceli dodržať zadaním rozmerov, musíme hodnoty paddingu odrátať od hodnôt height a width. Takto sme to spravili v prípade tretieho divu. Pravý a ľavý okraj pri tomto dive je 40 pixelov (10px + 30px) a tak sme od width 300px odpočítali 40px a zadali iba 260px. Spolu so 40 pixelmi z paddingu má šírka elementu spolu 300 pixelov. Vo výsledku je vidieť, že šírka tohto divu je rovnaká ako pri prvom dive.
V štvrtom dive sme vlastnosť width nezadali. Keďže je to blokový element, je roztiahnutý na plnú dostupnú šírku. Keby sme nezadali padding, vnútorný div by bol rovnako roztiahnutý na plnú šírku svojho rodiča, takže od kraja po kraj. Rodičovský div však má zadaný padding, takže sa šírka vnútorného divu o hodnoty paddingu zmenšila.
Podobne, ako zadávame vnútorné okraje pomocou vlastnosti padding, je možné zadať aj vonkajšie okraje elementu pomocou vlastnosti margin (margin – okraj). Keďže je to vonkajší okraj, rozmery elementu ako padding to nezväčšuje. Vytvára to iba okraj okolo elementu, čiže vzdialenosť v pixeloch od ďalších elementov. Ak sú elementy ukladané za sebou, pomocou tejto vlastnosti vytvárame medzi nimi medzery, aby na sebe neboli nalepené. Zadávanie je rovnaké ako pri paddingu, poďme si to rovno ukázať:
<!DOCTYPE html>
<html>
<body>
<div style="border: 1px solid black; margin: 20px;">Div 1</div>
<div style="border: 1px solid black; margin: 0;">Div 2</div>
<div style="border: 1px solid black; margin-top: 60px;">Div 3</div>
<div style="border: 1px solid black; margin: 20px 0px; padding: 20px;">
<span style="margin-right: 30px;">Meno</span>
<span>Imrich</span>
</div>
</body>
</html>
Pri prvom dive sme použili vonkajší okraj 20 pixelov. Je vidieť, že div je odsadený aj od horného, ľavého a pravého okraja simulátora 20 pixelov a druhý div, ktorý je za ním bez hodnôt marginu, je od neho odsadený 20 pixelov smerom dole. Tretí div má zadanú iba hodnotu pre horný okraj, aby nebol nalepený na druhom dive. V štvrtom dive sme použili dva inline elementy za sebou. Prvému sme nastavili hodnotu pre pravý okraj, aby ste videli aj odsadenie do strán. Týmto sme zabezpečili, že druhá textová položka (span) nebude na prvej nalepená, ale bude medzi nimi medzera 30 pixelov. Všimnite si, že v tejto ukážke sme už nepoužili tag br. Už ho viacej nebudeme potrebovať (mimo textu), vieme ho nahradiť pomocou vlastnosti margin-bottom.
Na záver tejto kapitoly si ukážeme ešte jednu možnosť. Možno ju nebudeme často využívať a ani by sa veľmi nemala, ale je dobré sa o nej zmieniť. Niekedy jej použitie rýchlo vyrieši problém. Vlastnosť margin môže mať aj negatívnu hodnotu, to znamená napríklad -10px. Čo to ale znamená? Kladné hodnoty posúvajú daný element o daný počet pixelov od vedľajšieho. Záporné hodnoty tým pádom tento element približujú, resp. negujú okraje. Čiže ak má nejaký element okraj 20 pixelov a vedľa neho dáme element, ktorý má margin -20 pixelov, tieto elementy budú vedľa seba, pretože sa druhý element posunul smerom k tomu prvému. Ak by jeho záporná hodnota prevyšovala okraj prvého, elementy sa budú prekrývať:
<!DOCTYPE html>
<html>
<body>
<div style="border: 1px solid black; margin: 0;">Div 1</div>
<div style="border: 1px solid black; margin-top: -10px;">Div 2</div>
<div style="border: 1px solid black; margin: 50px 0px; padding: 20px;">
<span style="border: 1px solid black; margin-right: 10px;">Meno</span>
<span style="border: 1px solid black; margin-left: -10px;">Imrich</span>
</div>
<div style="border: 1px solid black; margin: 20px 0px; padding: 20px;">
<span style="margin-right: 10px;">Meno</span>
<span style="margin-left: -20px;">Imrich</span>
</div>
</body>
</html>
Dva prvé divy sa prekrývajú, pretože sme druhému zadali mínusovú hodnotu horného okraja. V treťom dive sme pravý okraj prvého spanu negovali ľavým okrajom druhého spanu, takže elementy sú pri sebe. V poslednom dive sa spany prekrývajú, pretože záporná hodnota marginu prevyšuje okraj prvého spanu. Možno sa vám to zdá nateraz zbytočné, načo nám je prekrývanie elementov, určite sa s tým ale stretnete a možno to aj použijete, takže je dobré to poznať.