Vo vašom tutoriáli pôjde o dve veci: vonkajšie odsadenia a vonkajšie okraje.
Začneme s vonkajšími odsadeniami. Pri vytvorení elementu p, ktorý je priamo v rámci elementu body, definujú údaje o ľavom a pravom okraji okraje medzi týmito elementmi a vonkajšími okrajmi elementu body. Ak nasledujú viaceré odseky za sebou, údaje o vonkajšom okraji nahor a nadol určujú vzdialenosť medzi jednotlivými odsekmi.
Pri definovaní vonkajších odsadení a okrajov sú mimochodom možné aj negatívne hodnoty, ktorými je možné dosiahnuť prekrývanie.
Nastavenie vonkajšieho odsadenia
Okraje a odsadenie predstavujú vnútený voľný priestor medzi aktuálnym prvkom a jeho nadradeným alebo susedným prvkom. Rozumne sú tieto CSS vlastnosti použité v HTML elementoch, ktoré vytvárajú vlastné odseky alebo bloky.
V prípade margin ide o skrátenú podobu štyroch vlastností margin-top, margin-right, margin-bottom a margin-left. Možné sú nasledujúce hodnoty:
• auto – vonkajšie odsadenie sa automaticky vypočíta.
• Percentuálna hodnota – vzťahuje sa na prvok, pre ktorý je určený margin.
• Dĺžková hodnota – sú povolené aj negatívne hodnoty. Tým je možné, aby sa prvky prekrývali.
Povolené sú až štyri hodnoty:
• jedna hodnota – vonkajšie odsadenie hore, dole, vľavo a vpravo
• dve hodnoty – prvá hodnota pre vonkajšie odsadenie hore a dole, druhá hodnota pre vonkajšie odsadenie vpravo a vľavo
• tri hodnoty – prvá hodnota pre vonkajšie odsadenie hore, druhá hodnota pre vonkajšie odsadenie vľavo a vpravo, tretia hodnota pre vonkajšie odsadenie dole
• štyri hodnoty – prvá hodnota pre vonkajšie odsadenie hore, druhý pre vpravo, tretí dole a štvrtý vľavo.
Nasledujúci príklad ukazuje použitie všeobecných vlastností margin:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
background-color: yellow;
}
p.ex {
margin: 30px 50px 30px 50px;
background-color:#FF99FF;
</style>
</head>
<body>
<p>Nainštalovať kamera-Rig</p>
<p class="ex">V tomto videotrénigu sa dozviete, ako vytvoriť kamera-Rig a bezpečne sa pohybovať v 3D priestore. Projektový súbor je priložený.</p>
</body>
</html>
V tomto príklade boli zadefinované dva textové odseky.
Druhému odseku boli priradené aj odsadenia.
margin: 30px 50px 30px 50px;
Tento údaj znamená nasledovné:
• 30 pixelov odstup hore
• 50 pixelov odstup vpravo
• 30 pixelov odstup dole
• 50 pixelov odstup vľavo
Jednotlivé údaje pre odsadenia
Predtým bolo predstavené všeobecné odsadenie pomocou margin. No môžete tiež uviesť jednotlivé údaje. Pomocou nasledovných vlastností je možné určiť odstup nahor, vľavo, dole alebo vpravo pre jednotlivé bočné okraje prvku.
• margin-top – vonkajší okraj/odstup hore
• margin-right – vonkajší okraj/odstup vpravo
• margin-bottom – vonkajší okraj/odstup dole
• margin-left – vonkajší okraj/odstup vpravo
Pre všetky tieto štyri vlastnosti môžete používať nasledovné hodnoty:
• auto – vonkajší odsadenie bude automaticky vypočítané.
• Percentuálna hodnota – vzťahuje sa na prvok, pre ktorý je určené margin- [nahor, vpravo, dole, vľavo].
• Dĺžková hodnota – sú povolené aj negatívne hodnoty. Tým je možné, aby sa prvky prekrývali.
Nasledujúci príklad ukazuje efektívne využitie jednotlivých údajov.
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;
}
p.ex {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 50px;
}
</style>
</head>
<body>
<p>Nainštalovať kamera-Rig</p>
<p class="ex">V tomto videotrénigu sa dozviete, ako vytvoriť kamera-Rig a bezpečne sa pohybovať v 3D priestore. Projektový súbor je priložený.</p>
</body>
</html>
V prehliadači vyzerá výsledok nasledovne:
Nastavenie vnútorného odsadenia
Vo vnútornom okraji ide o vnútený voľný priestor medzi obsahom prvku a jeho vlastným okrajom. Rozumne sú nasledujúce CSS vlastnosti použité v HTML elementoch, ktoré vytvárajú vlastné odseky alebo bloky.
Pre vlastnosť padding ide o skrátenú podobu štyroch vlastností padding-top, padding-right, padding-bottom a padding-left. Pomocou nej môže byť definovaná šírka medzi rámom a obsahom prvku, teda vnútorné odsadenie.
• Percentuálna hodnota – vzťahuje sa na nadradený prvok.
• Dĺžková hodnota
Môžu byť uvedené až štyri hodnoty:
• jedna hodnota – vnútorné odsadenie hore, dole, vľavo a vpravo
• dve hodnoty – prvá hodnota pre vnútorné odsadenie hore a dole, druhá hodnota pre vnútorné odsadenie vpravo a vľavo
• tri hodnoty – prvá hodnota pre vnútorné odsadenie hore, druhá hodnota pre vnútorné odsadenie vľavo a vpravo, tretia hodnota pre vnútorné odsadenie dole
• štyri hodnoty – prvá hodnota pre vnútorné odsadenie hore, druhá pre vpravo, tretia dole a štvrtá vľavo.
Tu je ďalší príklad:
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;}
p.ex {
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
}
</style>
</head>
<body>
<p>Naladenie kamery-Rigu</p>
<p class="ex">V tomto video-tréningu zistíš, ako vytvoriť kamerový Rig a bezpečne sa s ním hýbať v 3D priestore. Projektový súbor je k dispozícii.</p>
</body>
</html>
A tu je výsledok v prehliadači:
Pomocou štyroch padding vlastností sa dajú definovať vnútorné vzdialenosti. Tieto štyri CSS vlastnosti sú k dispozícii:
• padding-top – Vzdialenosť medzi hornou hranicou obsahu a horným okrajom
• padding-bottom – Vzdialenosť medzi dolnou hranicou obsahu a dolným okrajom
• padding-left – Vzdialenosť medzi ľavou hranicou obsahu a ľavým okrajom
• padding-right – Vzdialenosť medzi pravou hranicou obsahu a pravým okrajom.
Pre všetky štyri vlastnosti možno použiť nasledujúce hodnoty:
