Tässä oppaassa käsitellään kahta asiaa: ulkoiset marginaalit ja reunukset.
Aloitetaan ulkoisista marginaaleista. p-elementissä, joka on määritetty suoraan body-elementin sisällä, vasemman ja oikean ikkunarajan määräämisellä tarkoitetaan etäisyyttä body-elementin ulkorajoista. Useiden kappaleiden ollessa peräkkäin, ylemmän ja alemman ulkoisen reunuksen määritteleminen tarkoittaa etäisyyttä yksittäisten kappaleiden välillä.
Muuten, ulkoisten marginaalien ja reunusten määrittelyssä negatiiviset arvot ovat mahdollisia, mikä mahdollistaa päällekkäisyydet.
Ulkoisen marginaalin määrittäminen
Ulkoraja ja marginaali ovat pakotettu tyhjä tila nykyisen elementin ja sen vanhemman tai naapurielementin välillä. Seuraavat CSS-ominaisuudet ovat hyödyllisiä HTML-elementeissä, jotka luovat oman kappaleen tai lohkon.
margin on lyhennetty muoto neljästä ominaisuudesta: margin-top, margin-right, margin-bottom ja margin-left. Tässä yhteydessä seuraavat arvot ovat mahdollisia:
• auto – ulkomarginaali lasketaan automaattisesti.
• prosenttitiedot – viittaa siihen elementtiin, jolle marginaali on määritetty.
• pituustiedot – negatiiviset arvot ovat sallittuja. Tämä mahdollistaa elementtien päällekkäisyyden.
Enintään neljä arvoa on sallittu:
• yksi arvo – ylä-, ala-, vasen ja oikea ulkomarginaali
• kaksi arvoa – ensimmäinen arvo ylös ja alas ulkomarginaali, toinen arvo oikealle ja vasemmalle ulkomarginaalille
• kolme arvoa – ensimmäinen arvo ylöspäin ulkomarginaalille, toinen vasen ja oikea ulkomarginaalille, kolmas arvo alaspäin ulkomarginaalille
• neljä arvoa – ensimmäinen ylös ulkomarginaalille, toinen oikealle, kolmas alas ja neljäs vasemmalle.
Alla oleva esimerkki näyttää yleisten margin-ominaisuuksien käytön:
<!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>Rakenna kamera-asema</p>
<p class="ex">Tässä videotutoriaalissa opit luomaan kamera-aseman ja liikuttamaan sitä turvallisesti 3D-tilassa. Projektitiedosto on mukana.</p>
</body>
</html>
Tässä esimerkissä määriteltiin kaksi tekstikappaletta.
Toiselle kappaleelle on myös määritetty marginaalit.
margin: 30px 50px 30px 50px;
Tämä määritys tarkoittaa seuraavaa:
• 30 pikselin etäisyys ylös
• 50 pikselin etäisyys oikealle
• 30 pikselin etäisyys alas
• 50 pikselin etäisyys vasemmalle
Yksittäiset määritykset marginaaleille
Aiemmin esiteltiin yleinen margin-määritys. Voit kuitenkin antaa myös yksittäisiä määrityksiä. Seuraavilla ominaisuuksilla voit määrittää ylemmän, vasemman, alemman tai oikean reunuksen etäisyyden yksittäisillä sivuilla elementissä.
• margin-top – ylämarginaali/reuna
• margin-right – oikea marginaali/reuna
• margin-bottom – alamarginaali/reuna
• margin-left – vasen marginaali/reuna
Kaikkiin neljään ominaisuuteen voi käyttää seuraavia arvoja:
• auto – ulkomarginaali lasketaan automaattisesti.
• prosenttiosa
• pituusarvo – negatiiviset arvot ovat sallittuja. Tämä mahdollistaa elementtien päällekkäisyyden.
Alla oleva esimerkki näyttää, miten yksittäisiä määrityksiä voidaan käyttää tehokkaasti.
<!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>Rakenna kamerarakenne</p>
<p class="ex">Tässä videokoulutuksessa opit, miten luot kamerarakenteen ja liikutat sitä turvallisesti 3D-tilassa. Mukana on projektitiedosto.</p>
</body>
</html>Ja tässä on tulos selaimessa:
Neljän padding-ominaisuuden avulla voidaan määrittää sisäiset marginaalit. Seuraavia neljää CSS-ominaisuutta varten on saatavilla:
• padding-top – Väli yläreunan ja sisällön yläosan välillä
• padding-bottom – Väli sisällön alareunan ja alareunan välillä
• padding-left – Väli sisällön vasemman reunan ja vasemman reunan välillä
• padding-right – Väli sisällön oikean reunan ja oikean reunan välillä.
Kaikissa neljässä ominaisuudessa voidaan käyttää seuraavia arvoja:
• Prosenttimäärä – suhteutuu vanhemman elementtiin
• Pituuden määrä
