Elementin raja, täyte ja marginaali

• Elementtien ominaisuuksien muuttaminen
• Elementin marginaalit
• Elementin täyte
• Elementille rajan ominaisuudet
  • border-width
  • border-color
  • border-style
  • border

Jokaisella elementille voidaan hahmottaa oheisen kuvan mukaiset ominaisuudet. Elementtiä kuvassa edustaa sisältö, joka voi olla esimerkiksi tekstikappale tai taulukon solu. Täytteellä (engl. padding) voidaan kasvattaa rajan ja sisällön välistä eroa toisistaan. Marginaalin avulla voidaan vastaavasti kasvattaa eri elementtien välistä tyhjää tilaa.

Täytealueen leveyttä voidaan muuttaa täytteen ominaisuuksien avulla, mutta täyte käyttää samoja taustavärin asetuksia kuin sisältö. Rajan väriä ja ulkoasua sekä muutamia muita ominaisuuksia voidaan muuttaa rajan ominaisuuksien avulla. Marginaalin ominaisuuksista voidaan muuttaa esimerkiksi marginaalin leveyttä, mutta marginaali on aina läpinäkyvä, joten sille ei voi asettaa omaa väriä. Seuraavassa tarkastellaan elementtien muotoilemiseen liittyviä seikkoja tarkemmin.

Elementtien ominaisuuksien muuttaminen

Kappaletason elementtejä ovat esimerkiksi tekstikappale, erilaiset listat sekä taulukot, mutta kappaletason elementtejä löytyy HTML:stä paljon muitakin. Kaikki elementit, jotka muodostavat oman kappaleen tai lohkon voidaan käsittää lohkotason elementeiksi. Tekstitason elementtejä ovat elementit, joita voidaan käyttää ainoastaan jonkin lohkotason elementin sisällä. Tekstitason elementit vaikuttavat ainoastaan muutamaan tekstikappaleen sisällä olevaan tekstin osaan, mutta tekstitason elementit eivät vaikuta koko kappaleen ominaisuuksiin. Sekä lohkotason että tekstitason elementin ympärillä olevan tilan muotoilemiseen voidaan käyttää marginaalin, rajan ja täytteen ominaisuuksia.

Perusidea elementtien täytteen, rajan ja marginaalin muotoilemisessa on muuttaa jokaista haluttua ominaisuutta erikseen jokaisesta suunnasta. Oheisessa kuvassa esitetään kaikki erilaiset mahdollisuudet sisällön ympärillä olevan tilan muotoilemiseen. Esimerkiksi haluttaessa muuttaa jonkin elementin vasemman täytteen leveyttä voidaan viitata pelkästään vasemman täytteen ominaisuuteen padding-left.

Seuraavat kaksi esimerkkiä p-elementin marginaalin määrittämiseksi ovat identtiset. Marginaalin määrittämisestä kannattaa huomata, että ellei kerrota mitä marginaalia ollaan muuttamassa, niin järjestys on seuraava: Ensimmäisenä arvona annataan ylämarginaalin arvo. Ylämarginaalin arvon antamisen jälkeen kierros jatkuu oikeaan marginaaliin. Kolmantena listassa on alamarginaali ja viimeisenä annetaan vasen marginaali. Jos jonkin marginaalin arvo halutaan jättää määrittelemättä, niin silloin muut marginaalin arvot on annettava toisen esimerkin muodossa viitaten marginaalin paikkaan.

p {
  margin: 10px 7px 4px 1px;
}

p {
  margin-top: 10px;
  margin-right: 7px;
  margin-bottom:4px;
  margin-left: 1px;
}

Marginaalin ja täyteen ominaisuudet eivät periydy, mutta ne vaikuttavat hieman toisiinsa. Esimerkiksi kahden vierekkäisen listaalkion (li-elementin) marginaali on maksimi yläpuolella olevan elementin alamarginaalista ja alapuolella olevan elementin ylämarginaalista. Marginaaleja ei siis lasketa yhteen, kuten voisi olettaa. Elementin korkeudesta ja leveydestä puhuttaessa tarkoitetaan aina elementin sisällön leveyttä ja korkeutta. Leveyteen ja korkeuteen ei oteta mukaan marginaaleja, rajaa tai täytettä.

Elementin marginaalit

Kaikkien XHTML-elementtien ympärille voidaan määritellä marginaali. Seuraavassa käydään esimerkkien avulla marginaalin määrittäminen tarkoin läpi.

margin-ominaisuuden avulla voidaan elementille määritellä marginaali, jolla voidaan lisätä tai vähentää elementtien rajojen välistä tyhjää tilaa. margin-ominaisuudelle voidaan antaa arvo pituusyksikköinä tai prosentteina. margin-ominaisuuden avulla voidaan antaa pituus kaikille marginaaleille yhtä aikaa, mutta jokaisen marginaalin leveyden voi määritellä myös erikseen. Elementin margin-ominaisuuksia määriteltäessä kannattaa muistaa, että määriteltävien marginaalien järjestys on seuraava: Ensimmäinen arvo vastaa ylämarginaalia, toinen oikeaa marginaalia, kolmas alamarginaalia ja neljäs vasenta marginaalia.

margin: [ <pituus> | <prosentti> | auto ] {1,4};

margin-ominaisuus ei ole periytyvä, mutta sitä voidaan käyttää kaikkien elementtien yhteydessä.

Seuraavissa esimerkeissä marginaalien arvot annetaan kahdella erilaisella tavalla. Ensimmäisessä esimerkissä ylämarginaalin korkeudeksi asetetaan kaksi kertaa kappaleen kirjasinkoko. Oikean marginaalin arvoksi asetetaan kolme kertaa kappaleen kirjasinkoko. Alamarginaalin korkeudeksi asetetaan neljä kertaa kappaleen kirjasinkoko. Vasemman marginaalin arvoksi asetetaan viisi kertaa kappaleen kirjasinkoko.

p {
  margin: 2em 3em 4em 5em;
}

Seuraavan esimerkin marginaalien koot ovat samoja kuin edellisessä esimerkissä määritellyt marginaalit.

p {
  margin-top: 2em;
  margin-right: 3em;
  margin-bottom: 4em;
  margin-left: 5em;
}

Jos elementin marginaalille annetaan vain yksi arvo seuraavan esimerkin mukaisesti, niin jokaisen marginaalin leveydeksi asetetaan 2em.

p { margin: 2em; }

Jos elementin marginaalille määritellään ainoastaan kaksi arvoa seuraavan esimerkin mukaisesti, niin ensimmäinen arvo 2em asetetaan ylä- ja alamarginaalin leveydeksi ja toinen arvo 3em asetetaan oikean ja vasemman marginaalin leveydeksi.

p { margin: 2em 3em; }

Elementin täyte

Kaikkien XHTML-elementtien ympärille voidaan määritellä täyte. Elementin täytteeksi kutsutaan elementin sisällön ja rajan väliin jäävää tyhjää aluetta.

padding-ominaisuudella voidaan muuttaa elementin täytteen leveyttä. padding-ominaisuus voidaan antaa pituusyksikköinä tai prosentteina. padding-ominaisuuden avulla voidaan antaa täytteen leveys jokaiselle puolelle yhtäaikaa, mutta jokaisen täytteen leveyden voi määritellä myös erikseen. padding-elementin ominaisuuksia määriteltäessä kannattaa muistaa, että määriteltävien täytteiden järjestys on seuraava: Ensimmäinen arvo vastaa ylätäytettä, toinen oikeaa täytettä, kolmas alatäytettä ja neljäs vasenta täytettä.

padding: <pituus> | <prosentti> ] {1,4};

padding-ominaisuus ei ole periytyvä, mutta sitä voidaan käyttää kaikkien elementtien yhteydessä.

Seuraavassa esimerkissä täytteen ominaisuudet määritetään kahdella erilaisella tavalla. Ensimmäisessä esimerkissä p-elementin täyteelle määritellään sekä ylä- että alatäytteen leveydeksi kaksi kertaa kappaleen kirjasimen koko. Oikean ja vasemman täytteen leveydeksi määritellään neljä kertaa kirjasimen koko.

p {
  padding: 2em 4em;
}

Seuraavan esimerkin täytteen koot ovat samoja kuin edellisessä esimerkissä määritellyt täytteet.

p {
  padding-top: 2em;
  padding-right: 4em;
  padding-bottom: 2em;
  padding-left: 4em;
}

Seuraavan esimerkin täytteen koot ovat samoja kuin edellisissä esimerkeissä määritellyt täytteet.

p {
  padding: 2em 4em 2em 4em;
}

Jos elementin täytteelle annetaan vain yksi arvo seuraavan esimerkin mukaisesti, niin jokaisen täytteen leveydeksi asetetaan 3em.

p { padding: 3em; }

Elementille rajan ominaisuudet

Elementille voidaan määritellä raja, joka erottaa elementin marginaalin ja täytteen toisistaan. Seuraavissa luvuissa käsiteltävät rajan ominaisuudet ovat border-width, border-color, border-style ja border.

border-width

Elementin rajojen leveys voidaan määrittää border-width-ominaisuuden avulla. Ominaisuudelle voidaan antaa arvoja pituusyksiköissä tai arvoina thin, medium ja thick. Arvolla thin rajaksi tulee ohut raja, arvolla medium rajaksi tulee keskipaksu ja arvolla thick rajasta tulee paksu.

border-width: [ thin | medium | thick | <length> ] {1,4};

border-width -ominaisuus ei ole periytyvä, mutta sitä voidaan käyttää kaikkien elementtien yhteydessä.

Jos border-width-ominaisuudelle annetaan ainoastaan yksi arvo, niin silloin kyseessä on kaikkien rajojen leveys. Kahdella arvolla määritellään pareittain oikean ja vasemman rajan leveys sekä ylä- ja alarajojen leveys.

Seuraavassa esimerkissä elementin jokaisen reunan paksuudeksi asetetaan paksu reuna.

border-width: thick;

Seuraavassa esimerkissä elementille asetetaan ylä- ja alareunaan paksu raja ja vasempaan ja oikeaan reunaan asetetaan ohut raja.

border-width: thick thin;

Seuraavassa esimerkissä ylärajaksi asetetaan paksu raja, oikeaksi rajaksi asetetaan keskipaksu raja, alarajaksi asetetaan ohut raja ja vasemmaksi rajaksi asetetaan keskipaksu raja.

border-width: thick medium thin medium;

Jokaisen kehyksen paksuus voidaan asettaa erikseen. Seuraavassa esimerkissä jokaisen kehyksen koko on asetettu edellisen esimerkin arvojen mukaisesti.

border-top-width: thick;
border-right-width: medium;
border-bottom-width: thin;
border-left-width: medium;

border-color

Elementin rajojen väri voidaan määritellä border-color-ominaisuuden avulla. Rajojen väri voidaan antaa suoraan värin nimellä tai värin RGB-arvona. Värien antamisesta enemmän luvussa Värin ja taustavärin ominaisuudet. Jokaiselle elementin reunalle voidaan määritellä oma väri. Tällöin värit annetaan seuraavassa järjestyksessä: ylärajan väri, oikean rajan väri, alarajan väri ja vasemman rajan väri.

border-color: <color> {1,4};

border-color-ominaisuus ei ole periytyvä, mutta sitä voidaan käyttää kaikkien elementtien yhteydessä.

Seuraavassa esimerkissä ylä- ja alarajan väriksi asetetaan punainen sekä oikean ja vasemman rajan väriksi asetetaan keltainen.

border-color: #ff0000 yellow;

Seuraavassa esimerkissä ylärajan väriksi asetetaan punainen, oikean rajan väriksi asetetaan vihreä, alarajan väriksi asetetaan sininen ja vasemman rajan väriksi asetetaan keltainen.

border-color: red green blue yellow;

border-style

border-style-ominaisuudella voidaan määritellä rajan ulkoasu. Rajan ulkoasu voidaan määritellä jokaiselle rajalle erikseen järjestyksessä: yläraja, oikea raja, alaraja ja vasen raja. Ominaisuuden arvoksi voidaan laittaa none, jolloin rajaa ei piirretä ollenkaan. Arvolla dotted raja on pilkutettu, arvolla dashed raja on katkoviivoitettu, arvolla solid raja on yhtenäinen, arvolla double raja on kaksinkertainen ja yhtenäinen, arvolla groove raja on kourumainen, arvolla ridge raja on harjamainen, arvolla inset raja on upotettu ja arvolla outset raja on korotettu.

border-style: [ none | dotted | dashed | solid | double | groove | ridge | inset | outset ] {1,4};

border-style-ominaisuus ei ole periytyvä, mutta sitä voidaan käyttää kaikkien elementtien yhteydessä.

Seuraavassa esimerkissä yläraja on yhtenäinen, oikea raja on katkoviivoitettu, alaraja on yhtenäinen ja vasen raja on katkoviivoitettu.

border-style: solid dashed solid dashed;

Seuraavan esimerkin rajamäärittelyt ovat täsmälleen samat kuin edellisessä esimerkissä.

border-style: solid dashed;

border

border-ominaisuuden avulla voidaan keskitetysti hallita kaikkia rajan ominaisuuden määrityksiä. Tarkemmat määritykset rajan leveyden, ulkoasun ja värin määrittämiseksi löytyvät edellisistä luvuista. border-ominaisuudella joudutaan määrittelemään jokaisen reunan ominaisuudet samalla kertaa.

border: <border-width> || <border-style> || <color>;

border-ominaisuus ei ole periytyvä, mutta sitä voidaan käyttää kaikkien elementtien yhteydessä.

Seuraavassa esimerkissä kaikille reunoille määritellään keskikokoinen yhtenäinen ja punainen raja.

border: medium solid red;

Seuraavassa esimerkissä määritellään edellistä esimerkkiä vastaavat ominaisuudet yksi reuna kerrallaan.

border-top: medium solid red;
border-right: medium solid red;
border-bottom: medium solid red;
border-left: medium solid red;

Seuraavaan esimerkkiin on koottu erilaisia rajan, täytteen ja marginaalin ominaisuuksia.

h1 {
  margin-top: 1em;
  margin-right: 1em;
  margin-bottom: 1em;
  margin-left: 1em;
  padding: 0.5em;
  border-color: red;
  border-style: dashed;
  border-width: medium thick;
  color: black;
  background-color: yellow;
}

p {
  padding: 1em 2em 3em 4em;
  border: thick ridge silver;
}

strong {
  padding: 0.1em;
  border-color: blue;
  border-style: solid;
  border-width: thin medium medium thin;
}

Kuva 8: Esimerkki rajan, täytteen ja marginaalin käytöstä dokumentissa.