HTML-elementin tyylittelyssä, sijoittelussa ja koon asettelussa on tärkeää ymmärtää HTML-elementin sisäinen rakenne, miten se näytetään ja miten se suhtautuu sen viereisiin elementteihin.

HTML-elementti koostuu seuraavista osista:

• sisältö
• täyte, eli padding (tila sisällön ja reunan välissä)
• reunaviiva, eli border
• marginaali, eli margin (tila reunan ja ulomman laatikon välissä)

Elementin mitat

Lohkotyyppiselle elementille voidaan määrittää:

• Elementin leveys ominaisuudella width
• Elementin korkeus ominaisuudella height

Arvot voidaan antaa absoluuttisina tai suhteellisina arvoina, eli käytössä olevilla yksiköillä, kuten px, em ja %. Huomattavaa on, että prosentteina annettuna koko on osuutena ulomman “vanhempielementin” koosta. Kooksi voidaan antaa myös arvo auto, joka on ominaisuuden oletusarvo. Esimerkiksi, jos kuvalle annetaan leveys, mutta korkeus jätetään antamatta tai sen arvoksi määrätään auto, skaalautuu korkeus automaattisesti suhteessa leveyteen.

Ominaisuudet width ja height vaikuttavat (oletuksena) vain elementin sisällön leveyteen ja korkeuteen. Tämän lisäksi tulevat yleensä vielä marginaali, reunus sekä padding.

Elementille annetut taustavärit ja -kuvat vaikuttavat reunaviivan sisäpuoliseen alueeseen, eli sisältöön ja paddingiin.

<img style="width: 400px; height: 50px;" src="ghost-penguin.png">
<img style="width: 400px; height: auto;" src="ghost-penguin.png">

Marginaalit (margin)

Elementille annetaan margin-ominaisuudella marginaali. Tämä määrää, paljonko tyhjää tilaa pitää jättää elementin ympärille. Marginaali voidaan antaa seuraavissa muodoissa:

• margin: 3em; – kaikille sivuille sama 3em-kokoinen marginaali
• margin: 2em 3em; – pystysuuntaan (ylä ja alapuolelle) 2em, vaakasuuntaan (oikealle ja vasemmalle) 3em
• margin: 2em 1em 3em; – yläpuolelle 2em, vaakasuunnassa 1em ja alapuolelle 3em
• margin: 1em 2em 3em 4em;– sivut järjestyksessä top, right, bottom, left (muistisääntö: trouble)

Arvot luetellaan siis myötäpäivään ylhäältä alkaen järjestyksessä top, right, bottom, left.

Marginaalit voidaan määrätä kullekin reunalle myös erikseen ominaisuuksilla margin-top, margin-right, margin-bottom ja margin-left.

Marginaalien kanssa huomattavaa on, että keskenään vierekkäisten tai päällekkäisten elementtien marginaalit menevät keskenään ristiin. Siis, jos elementin alamarginaali on 3em ja seuraavan elementin ylämarginaali on 2em, ei näiden väliin jää suinkaan 5em verran tyhjää tilaa vaan vain 3em. Ei kaksinkertaista marginaalia!

Täyte (padding)

Vastaavasti kuin marginaali, määrätään elementin reunan ja sisällön väliin jäävä tyhjä tila ominaisuudella padding sekä sen alaominaisuuksilla padding-top, padding-right, padding-bottom ja padding-left.

• padding: 3em; – kaikille sivuille sama 3em-kokoinen täyte
• padding: 2em 3em; – pystysuuntaan (ylä ja alapuolelle) 2em, vaakasuuntaan (oikealle ja vasemmalle) 3em
• padding: 2em 1em 3em; – yläpuolelle 2em, vaakasuunnassa 1em ja alapuolelle 3em
• padding: 1em 2em 3em 4em;– sivut järjestyksessä top, right, bottom, left (muistisääntö: trouble)

Toisin kuin marginaalit, vierekkäisten elementtien täytteet eivät “romahda” yhteen päällekkäin, sillä ne ovat osa itse elementtiä eikä vain sen ympärillä olevaa tyhjää tilaa. Esimerkiksi taustakuva tai -väri vaikuttavat myös täytteeseen.

Reuna (border)

Reuna eli reunaviiva on marginaalin ja täytteen välinen osuus elementtiä ja sen paksuus on oletuksena nolla. Reuna määrätään border-ominaisuudella ja sen aliominaisuuksilla. border-ominaisuus koostuu aliominaisuuksista:

• border-width – reunaviivan paksuus
• border-style – reunaviivan tyyli
• border-color – reunaviivan väri

Aliominaisuudet voidaan kuitenkin määrittää tässä järjestyksessä suoraan border-ominaisuudelle. Reunaviivan tyylin arvoja ovat esimerkiksi:

• none – ei reunaviivaa
• hidden – reunukset piilossa, vie tilan, mutta ei näy
• dotted – pisteviiva
• dashed – katkoviiva
• solid – yhtenäinen viiva
• double – kaksoisviiva

<h1 style="border: 2px solid red;">Laatikoitu otsikko</h1>
<h1 style="border-width: 5px 10px 15px 20px;
           border-style: double solid dotted;
           border-color: red blue green;">Laatikoitu otsikko</h1>

Reunojen ominaisuudet voidaan tarvittaessa yksilöidä vielä tarkemmin ominaisuuksilla, joiden nimet ovat tyyliä: border-right-style, border-top-color, jne.

margin, border, padding, width, height

<div>
    <h1>Otsikko</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Donec quis risus non velit imperdiet laoreet. Nulla molestie a ante id pharetra.
    Morbi finibus sed elit tincidunt laoreet. Etiam elementum malesuada nisl ut sodales.</p>
    <ul style="border: 1px solid green;">
        <li style="background-color: #ffa;">yksi</li>
        <li>kaksi</li>
    </ul>
</div>
<div style="margin: 0 4em; border-right: 3px solid red; border-left: 1px dashed black;">
    <h1 style="margin: 1em 3em 3em; padding: 1em 2em; background-color: #faa;">Otsikko</h1>
    <p style="border-top: 1px solid blue; border-bottom: 1px solid blue;">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Donec quis risus non velit imperdiet laoreet. Nulla molestie a ante id pharetra.
    Morbi finibus sed elit tincidunt laoreet. Etiam elementum malesuada nisl ut sodales.</p>
    <ul style="margin: 0; padding: 0; border: 1px solid green;">
        <li style="background-color: #ffa;">yksi</li>
        <li>kaksi</li>
    </ul>
</div>