V tem vadniku bo šlo za dve stvari: zunanje razdalje in zunanje robove.
Začnimo s zunanjimi razdaljami. Za element p, ki je neposredno znotraj elementa body, navedbe za levi in desni rob okna pomenijo razdaljo do zunanjih meja elementa body. Če sledijo drug za drugim večji odstavki, navedbe za zunanji rob zgoraj in spodaj pomenijo razdaljo med posameznimi odstavki.
Pri določanju zunanjih razdalj in robov so možne tudi negativne vrednosti, s katerimi dosežete prekrivanja.
Določanje zunanjih razdalj
Zunanji rob in razmik sta vsiljeni praznini med trenutnim elementom in njegovim starševskim ali sosednjim elementom. Uporabne so naslednje CSS lastnosti v HTML elementih, ki ustvarjajo lasten odstavek oziroma blok.
Za lastnost margin gre za skrajšano obliko štirih lastnosti margin-top, margin-right, margin-bottom in margin-left. Možne so naslednje vrednosti:
• auto – zunanji razmik se samodejno izračuna.
• Odstotkovna vrednost – nanaša se na element, ki je bil označen z margin.
• Dolžinska vrednost – dovoljene so tudi negativne vrednosti. S tem se elementi lahko prekrivajo.
Dovoljene so štiri vrednosti:
• ena vrednost – zunanji razmik zgoraj, spodaj, levo in desno
• dve vrednosti – prva vrednost za zunanji razmik zgoraj in spodaj, druga vrednost za zunanji razmik desno in levo
• tri vrednosti – prva vrednost za zunanji razmik zgoraj, druga vrednost za zunanji razmik levo in desno, tretja vrednost za zunanji razmik spodaj
• štiri vrednosti – prva vrednost za zunanji razmik zgoraj, druga za desno, tretja spodaj in četrta levo.
V naslednjem primeru je prikazana uporaba splošnih margin lastnosti:
<!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>Kamera-Rig aufbauen</p>
<p class="ex">In diesem Video-Training erfährst du, wie du ein Kamera-Rig erstellst und dieses sicher durch den 3D-Raum bewegst. Eine Projektdatei liegt bei.</p>
</body>
</html>
V tem primeru sta bila določena dva besedilna odstavka.
Drugi odstavku so bili dodatno dodeljeni tudi razmiki.
margin: 30px 50px 30px 50px;
Ta navedba pomeni naslednje:
• 30 pikslov razmika navzgor
• 50 pikslov razmika v desno
• 30 pikslov razmika navzdol
• 50 pikslov razmika v levo
Posamične določitve za razmike
Predstavljena je bila splošna določitev margin. Lahko pa naredite tudi posamične določitve. S pomočjo naslednjih lastnosti lahko za posamezne stranske robove elementa določite razmik navzgor, levo, navzdol ali desno.
• margin-top – zunanji rob/razmik navzgor
• margin-right – zunanji rob/razmik desno
• margin-bottom – zunanji rob/razmik navzdol
• margin-left – zunanji rob/razmik levo
Pri vseh štirih lastnostih so možne naslednje vrednosti:
• auto – zunanji razmik se samodejno izračuna.
• Odstotkovna vrednost – nanaša se na element, za katerega je bil določen margin- [top, right, bottom, left].
• Dolžinska vrednost – dovoljene so tudi negativne vrednosti. S tem se elementi lahko prekrivajo.
Prikazano je, kako učinkovito izkoristiti posamične določitve.
<!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>Kamera-Rig aufbauen</p>
<p class="ex">In diesem Video-Training erfährst du, wie du ein Kamera-Rig erstellst und dieses sicher durch den 3D-Raum bewegst. Eine Projektdatei liegt bei.</p>
</body>
</html>
V brskalniku izgleda rezultat takole:
Določanje notranjih razdalj
Pri notranjih razdaljah gre za prisiljeni prostor med vsebino elementa in njegovim lastnim robom. Uporabne so sledeče CSS lastnosti v HTML elementih, ki ustvarjajo lasten odstavek oziroma blok.
Za padding gre za skrajšano obliko štirih lastnosti padding-top, padding-right, padding-bottom in padding-left. Označitev širine med okvirjem in vsebino elementa, torej notranji razmik, se lahko določi prek tega.
• Odstotkovna vrednost – nanaša se na starševski element.
• Dolžinska vrednost
Za vsako izmed teh lastnosti lahko določite do štiri vrednosti:
• ena vrednost – notranji razmik zgoraj, spodaj, levo in desno
• dve vrednosti – prva vrednost za notranji razmik zgoraj in spodaj, druga vrednost za notranji razmik desno in levo
• tri vrednosti – prva vrednost za notranji razmik zgoraj, druga vrednost za notranji razmik levo in desno, tretja vrednost za notranji razmik spodaj
• štiri vrednosti – prva vrednost za notranji razmik zgoraj, druga vrednost za desno, tretja spodaj in četrta levo.
Tudi tukaj je primer:
<!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>Postavitev kamere-Rig</p>
<p class="ex">V tem videu-šolanju se boste naučili, kako ustvariti kamero-Rig in jo varno premikati skozi 3D prostor. Priložena je projekt datoteka.</p>
</body>
</html>In tukaj je rezultat v brskalniku:
Z uporabo štirih lastnosti padding lahko določite notranje razmike. Na voljo so naslednje štiri CSS lastnosti:
• padding-top – Razmik med zgornjim robom vsebine in zgornjim robom
• padding-bottom – Razmik med spodnjim robom vsebine in spodnjim robom
• padding-left – Razmik med levim robom vsebine in levim robom
• padding-right – Razmik med desnim robom vsebine in desnim robom.
Na vse štiri lastnosti se lahko nanašajo naslednje vrednosti:
• Procent - nanaša se na nadrejeni element
• Dolžinski podatek
