Project Template - Margins + Borders + Padding

Project Template pääsee taas jatkumaan kun Amoena on kotiutunut maaseudulta. (Kyllä, minusta on varsin viihdyttävää puhua itsestäni kolmannessa persoonassa.) Tänään on vuorossa näkymättömien ja näkyvien rajojen asettamista.

Löysin netistä tämän ala puolelta löytyvän oivan esimerkin. Mielestäni siinä näkyy selvästi mikä margineiden, bordereiden ja paddingin merkitys ja niiden suhde toisiinsa. "Margin and padding are the two most commonly used properties for spacing-out elements. A margin is the space outside of the element, whereas padding is the space inside the element."



Aiheesta kiinnostuneet voivat klikata linkkiä postauksen alapuolella.

Margins

Templatessa marginaalit toimivat samaan tapaan kuin kouluvihkoissa tai konsepteissa. Ne jättävät tyhjää tilaa elementtien ympärille. Templatekoodissa ne voivat olla merkittynä monella eri tavalla. Alla muutamia yleisimpiä esimerkkejä:

1. margin: 0px;
Marginaalit ovat yhtä leveät ylhäällä ja alhaalla sekä molemmilla sivuilla.

2. margin: 0px 0px;
Sinisellä merkitty on ylä- ja alamarginaalien leveys ja vihreällä merkitty oikean ja vasemman.

3. margin: 0px 0px 0px 0px;
Sinisellä merkitty on yläreunan marginaali, vaaleampi sininen oikean, vihreä alareunan ja vaaleampi vihreä vasemman reunan.

4. margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
margin-bottom: 0px;
Marginaalit voi myös määritellä näin.

Kaikki tavat ovat yhtä toimivia, joten niistä voi valita itselleen sopivimman tai käyttää kaikkia sekaisin, kuten minulla on (pahana?) tapana.

Borders

Borderit ovat viivoja. Esimerkiksi tämän blogin sivuilla olevat violetti ja sininen viiva on tehty niillä. Nekin voi määritellä useammalla eri tavalla samaan tapaan kuin marginaaleja (katso siis ylempi). Project Template -templatessa yleisin kaava on kuitenkin tämä:

border-left: solid 1px #000000;
Sinisellä merkitty kertoo viivan sijainnin, vihreä viivan tyylin, violetti viivan paksuuden ja lila viivan värin.

Eri viivatyylejä ovat:
solid
dotted
dashed
double
sekä
groove
ridge
inset
outset
mutta näiden viimeksi mainittujen käyttäminen ei ole niin suositeltavaa, sillä ne renderöityvät eri selaimissa eri lailla.

Padding

Padding määrittää siis elementin sisään jäävän tilan. Joissakin tapauksissa sitä ei tarvitse välttämättä käyttää ollenkaan, vaan sen voi korvata marginaaleilla.

Käyttäminen

Tämä saattaa tuntua tyhjän päälle jättämiseltä, mutta näiden kolmen käyttämisessä avainsanana on ehdottomasti kokeileminen. Voit lisätä näitä kolmea oikeastaan minne tahansa, kunhan pysyttelet </style>-tagin yläpuolella. Kopioi ja liitä jokin valmis rivi tai kirjoita se itse haluamaasi kohtaan ja kokeile mitä tapahtuu. Alla muutama esimerkki:


#left {
float: left;
width: 250px;
line-height: 150%;
background-color: #FFFFFF;
margin: 280px 10px 0px 10px;
font-size: x-small;
padding-left: 0px;
overflow: hidden;
padding-bottom: 0px;
border: solid 1px #000000;
}

Tässä esimerkissä sivupalkin ympärille on lisätty ohut musta reunus.

#main {
width: 490px;
margin-top: 57px;
padding: 10px;
text-align: left;
margin-left: 10px;
margin-right: 10px;
border: solid 1px #000000;
float: right;
overflow: hidden;
background-color: #FFFFFF;
}

Tässä esimerkissä tekstiosion ympärille on asetettu musta reunus. Sen lisäksi tekstin ja reunuksen väliä on kasvatettu (padding).

Luettavaa: CSS Beginner Tutorial