Selles õpetuses käsitletakse kahte asja: välisvahekaugused ja -marginaalid.
Alustame välisvahekaugustest. p-element, mis on määratletud otse body sees, tähendab vasaku ja parema aknapiiri kaugust body elemendi välispiiridest. Kui tegemist on mitme lõiguga järjest, siis ülemine ja alumine välismarginaal tähendavad kaugust üksikute lõikude vahel.
Välisvahekauguste ja -marginaalide määratlemisel on muide võimalik ka negatiivsed väärtused, mis võimaldavad ülekattumist saavutada.
Välisvahekauguse määramine
Välimarginaal ja -vahekaugus on sundleer ruumi vahel hetkeelemendi ja selle vanema või naaberelemendi vahel. Mõistlikud on järgmised CSS-omadused HTML-elementides, mis loovad endale oma paragraafi või moodustavad ploki.
Margin on kokkuvõttev vorm neljast omadusest margin-top, margin-right, margin-bottom ja margin-left. Võimalikud on järgmised väärtused:
• auto - välisvahekaugust arvutatakse automaatselt.
• Protsent - viitab elemendile, mille jaoks margin on määratud.
• Pikkus - lubatud on ka negatiivsed väärtused. Selle abil on võimalik elemente kattuda lasta.
Lubatud on kuni neli väärtust:
• üks väärtus - välisvahekaugus üleval, all, vasakule ja paremale
• kaks väärtust - esimene väärtus välisvahekauguseks üleval ja all, teine väärtus välisvahekauguseks paremal ja vasakul
• kolm väärtust - esimene väärtus välisvahekauguseks üleval, teine väärtus välisvahekauguseks paremal ja vasakul, kolmas väärtus välisvahekauguseks all
• neli väärtust - esimene väärtus välisvahekauguseks üleval, teine paremale, kolmas all ja neljas vasakule.
Alljärgnev näide näitab üldise margin omaduse kasutamist:
<!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>
Selles näites on määratletud kaks tekstilõiku.
Teisele lõigule anti ka vahekaugused.
margin: 30px 50px 30px 50px;
See määrang tähendab järgmist:
• 30 pikslit kaugus ülespoole
• 50 pikslit kaugus paremale
• 30 pikslit kaugus alla
• 50 pikslit kaugus vasakule
Üksikasjalikud juhised marginaalide kohta
Eelnevalt tutvustati üldist margin määramist. Võite aga teha ka üksikasjalikke määramisi. Iga külje jaoks saab määratleda üksikasju, et määrata elemendi ülemise, vasaku, alumise või parema kaugus.
• margin-top - välisvahekaugus/-marginaal ülal
• margin-right - välisvahekaugus/-marginaal paremal
• margin-bottom - välisvahekaugus/-marginaal all
• margin-left - välisvahekaugus/-marginaal vasakul
Kõigil neljal omadusel võib kasutada järgmisi väärtusi:
• auto - välisvahekaugust arvutatakse automaatselt.
• Protsent - viitab elemendile, mille jaoks margin- [ülal, paremal, all, vasakul] on määratud.
• Pikkus - lubatud on ka negatiivsed väärtused. Selle abil on võimalik elemente kattuda lasta.
Alljärgnev näide näitab, kuidas üksikasjalikke määramisi tõhusalt kasutada.
<!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>
Brauseris näeb tulemus välja järgmiselt:
Sisemise vahekauguse määramine
Sisemise vahekauguse korral on tegemist sundleeriga elemendi sisu ja selle enda elemendipiiri vahel. Mõistlikud on järgmised CSS-omadused HTML-elementides, mis loovad endale oma paragraafi või moodustavad ploki.Padding on kokkuvõttev vorm neljast omadusest padding-top, padding-right, padding-bottom ja padding-left. Selle abil saab määrata elemendi raami ja selle sisu, ehk sisemise vahekauguse laiuse.
• Protsent - viitab vanemalelemendile.
• Pikkus
Iga üksiku külje jaoks saab määrata kuni neli väärtust:
• üks väärtus - sisemine vahekaugus üleval, all, vasakul ja paremal
• kaks väärtust - esimene väärtus sisemise vahekauguse jaoks üleval ja all, teine väärtus sisemise vahekauguse jaoks paremal ja vasakul
• kolm väärtust - esimene väärtus sisemise vahekauguse jaoks üleval, teine väärtus sisemise vahekauguse jaoks paremal ja vasakul, kolmas väärtus sisemise vahekauguse jaoks all
• neli väärtust - esimene väärtus sisemise vahekauguse jaoks üleval, teine paremale, kolmas alla ja neljas vasakule.
Siin on ka üks näide:
<!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>Kamera-Rigi seadistamine</p>
<p class="ex">Selles videokoolituses saate teada, kuidas luua kaamerarigi ja seda ohutult 3D-ruumis liigutada. On olemas projektifail.</p>
</body>
</html>Ja siin on tulemus veebibrauseris:
Sisemised vahed saab määratleda nelja polstriomaduse abil. Selleks on järgmised CSS-omadused saadaval:
• padding-top – kaugus sisu ülemise serva ja ülemise ääre vahel
• padding-bottom – kaugus sisu alumise serva ja alumise ääre vahel
• padding-left – kaugus sisu vasaku serva ja vasaku ääre vahel
• padding-right – kaugus sisu parema serva ja parema ääre vahel.
Kõigi nelja omaduse puhul saab kasutada järgmisi väärtusi:
• protsentuaalne väärtus – viitab ülemelemendile
• pikkusväärtus
