Reunatäyte ja marginaali (Web Design 101)

Reunatäyte (padding) ja marginaali (margin) ovat tärkeitä välineitä verkkosivuston suunnittelussa ja toteutuksessa. Niiden avulla voidaan luoda tyhjää tilaa verkkosivulle.

Luettuasi tämän artikkelin, tiedät mitä reunatäyte ja marginaali ovat ja missä tilanteessa kumpaakin käytetään.

Miksi tyhjää tilaa tarvitaan verkkosivuilla?

Huomionarvoinen sisältö on verkkosivuston tärkein ja käytännössä ainoa todellinen kilpailukeino.

Sisältö kuitenkin toimii kunnolla vasta, kun se esitetään sivuston käyttäjille helppokäyttöisessä ja tärkeät asiat nopeasti esiin nostavassa muodossa.

Täyteen ahdettu, ilman selkeää rytmiä asiasta toiseen poukkoileva verkkosivu tekee sen katselijan elämästä vaikeaa, pahimmillaan karkottaen vierailijan pikaisesti muualle.

Tyhjä tila on tehokeino

Tyhjä tila (josta käytetään monissa yhteyksissä termiä whitespace) on yksi tehokkaiden verkkosivujen luomisen tehokeinoista.

Tyhjän tilan käytöllä voidaan:

• Parantaa verkkosivun sisällön yleistä käytettävyyttä
• Ohjata sivun katsojan huomiota tärkeisiin asioihin
• Korostaa ja nostaa esiin tulosten kannalta keskeisiä sisältöelementtejä, esimerkiksi painikkeita

Tyhjä tila siis toimii, joten sen käyttö oikeissa paikoissa sisältyy aina tehokkaiden verkkosivujen suunnitteluun.

Reunatäyte ja marginaali – mitä eroa niillä on?

Reunatäyte ja marginaali ovat tärkeitä verkkosivun suunnittelussa ja toteuttamisessa, sillä niiden avulla saadaan lisättyä tyhjää tilaa sinne, missä sitä tarvitaan.

Käyttämällä reunatäytettä ja marginaalia saadaan tyhjää tilaa lisättyä:

• Sisältöelementtien sisäpuolelle (sisällön ja elementin ulkoreunan väliin) – tässä tapauksessa käytettävä väline on reunatäyte
• Sisältöelementtien ulkopuolelle (sisältöelementin ja muiden sisältöelementtien sekä sivun reunojen väliin) – tässä tapauksessa käytettävä väline on marginaali

Reunatäytteen ja marginaalin sijoittuminen suhteessa sisältöelementtiin käy ilmi alla olevasta kuvasta.

Kuvassa oranssilla pohjavärillä varustettu suorakaide edustaa sisältöelementtiä, jonka sisälle on sijoitettu sisältöä, esimerkiksi kuva (sininen suorakaide).

Lisäämällä sisältöelementtiin reunatäytettä saadaan sisällön ja elementin ulkoreunan väliin syntymään halutun kokoinen tyhjä tila.

Vastaavasti sisältöelementin ulkopuolelle on luotu tyhjää tilaa joka suuntaan lisäämällä sisältöelementtiin marginaalia.

Sisältöelementtiin voidaan tarvittaessa lisätä myös sivun käyttäjille näkyvä reunaviiva, jonka avulla elementtiä voidaan nostaa paremmin esiin muun sisällön joukosta.

Reunatäytteen ja marginaalin lisääminen

Reunatäyte ja marginaali määritellään muokkaamalla sen sisältöelementin tyyliasetuksia, johon reunatäyte tai marginaali halutaan lisätä.

Reunatäytteen ja marginaalin lisäämisessä voi käyttää useampaa vaihtoehtoista mittayksikköä.

Esimerkki:

Halutaan lisätä elementin ympärille (kaikki sivut) kapea tyhjä tila (=marginaali). Mittayksikkönä käytetään pikseliä (px).

Tyylimääritys tässä tapauksessa on:

margin: 10px;

Esimerkissä marginaali lisätään saman kokoisena kaikille neljälle sivulle.

Jos marginaali haluttaisiin lisätä eri kokoisena eri sivuille, esimerkiksi:

• 10px yläpuolelle
• 20px oikealle puolelle
• 15px alapuolelle
• 5px vasemmalle puolelle

Tyylimääritys tässä tapauksessa olisi:

margin: 10px 20px 15px 5px;

Esimerkissä marginaali lisätään eri kokoisena kaikille neljälle sivulle, joiden järjestys koodissa on yläreuna – oikea reuna – alareuna – vasen reuna.

Reunatäytteen ja marginaalin lisääminen WordPressissä

Edellä esitetyt tyylimuokkaukset voi tehdä muokkaamalla verkkosivuston tyylisivulle (CSS) lisättyjä elementtien tyylimäärityksiä.

Jos verkkosivusto on toteutettu WordPress-julkaisujärjestelmällä, muokkaukset voi tehdä helposti suoraan WordPressin lohkoeditorissa tai koko sivuston tyyliasetuksissa.

WordPress päivittää tyylisivut automaattisesti muutosten jälkeen, joten sivuston ylläpitäjän ei tarvitse muokata tyylisivua kirjoittamalla CSS-koodia.

WordPressissä tavanomaisten tyylimuutosten tekeminen siis onnistuu, vaikka et osaisi itse kirjoittaa CSS-koodia.

Esimerkki: marginaalin asettaminen WordPressissä

Alla olevassa kuvassa näkyy, että sivulle on lisätty kaksi päällekkäistä kuva-asetelmaa (käyttämällä WordPressin Ruudukko-lohkoa).

Kuva-asetelmat koskettavat toisiaan, koska niiden väliin ei ole määritelty lainkaan tyhjää tilaa (ks. vasemmalle osoittava punainen nuoli kuvan keskiosassa).

Oikean reunan asetuspalkissa näkyy alemman kuva-asetelman (ruudukon) asetuspalkki, josta ilmenee, että tämän hetkinen marginaaliasetus on 0 (ei marginaalia).

Kuva-asetelmien väliin voidaan lisätä tyhjää tilaa kasvattamalla alemman ruudukon yläpuolista marginaalia.

Tämä saadaan aikaan klikkaamalla ensin oikean reunan marginaaliasetuksissa pientä neliötä (marginaali-valinnat) ja valitsemalla sieltä marginaali ylös.

Haluttu marginaali voidaan asettaa liukusäätimellä tai klikkaamalla mustaa neliötä liukusäätimen oikealla puolella ja asettamalla haluttu arvo. Tässä tapauksessa marginaaliksi on asetettu 20 px (pikseliä).

Muutoksen jälkeen ruudukot eivät enää kosketa toisiaan, vaan niiden väliin jää marginaaliasetuksella määritellyn kokoinen tyhjä tila.