Elementeille voidaan määrittää taytettä ja marginaalia, jolla voidaan muuttaa sisällön sijaintia.

Marginaali
Margilaanilla voidaan määrittää elementtien väliin tyhjää tilaa haluttu määrä.
Täyte
Täytteellä voidaan määrittää elementin rajan ja sisällön välistä eroa haluttu määrä.

Marginaali (margin)

Margilaanilla voidaan määrittää elementtien väliin tyhjää tilaa haluttu määrä. Marginaali on aina läpinäkyvä, joten sille ei voida määrittää omaa väriä.

margin:arvo;
Esimerkiksi
margin:10px;
Esimerkki 1
Tässä elementissä on marginaalia 10 pikseliä.

Ilman marginaalia elementti näyttäisi tältä:

Tässä elementissä ei ole marginaalia.

Elementille voidaan määrittää omat marginaalit ylös, oikealle, alas ja vasemmalle.

margin-top:arvo;
margin-right:arvo;
margin-bottom:arvo;
margin-left:arvo;
Esimerkiksi
margin-top:10px;
margin-right:5px;
margin-bottom:20px;
margin-left:50px;
Esimerkki2
Tässä elementissä on marginaalia 10px ylhäällä, 5px oikealla, 20px alhaalla ja 50px vasemmalla.

Esimerkki2 voidaan toteuttaa myös lyhyemmällä tavalla, pikakirjoutuksella. Pikakirjoituksessa laitamme arvot peräkkäin. Ensin määritämme marginaalin ylös, sitten oikealle, alas ja vasemmalle.

margin: arvo arvo arvo arvo;
Esimerkiksi
margin:20px 5px 20px 50px;
Esimerkki3
Tässä on määritetty marginaali pikakirjoituksella.

Pikakirjoitusta voidaan lyhentää vielä enemmän, jos halutaan määrittää samat arvot ylös ja alas, sekä oikealle ja vasemmalle. Ensimmäinen luku määrittää marginaalin ylös ja alas. Toinen luku määrittää marginaalin oikealle ja vasemmalle.

margin: arvo arvo;
Esimerkiksi
margin:20px 20px;
Esimerkki4
Tässä elementissä on marginaalia 10px ylhäällä ja alhaalla, sekä 20px oikealla ja vasemmalla.

Täyte (padding)

Täytteellä voidaan määrittää elementin rajan ja sisällön välistä eroa haluttu määrä. Täyte käyttää samaa taustaväriä, kuin elementti, johon se määritetään.

padding:arvo;
Esimerkiksi
padding:20px;

Esimerkki 1

Tässä elementissä on täytettä 10 pikseliä.

Marginaalin tapaan, myös täytteelle voidaan määrittää omat arvot ylös, oikealle, alas ja vasemmalle.

padding-top:arvo;
padding-right:arvo;
padding-bottom:arvo;
padding-left:arvo;

padding:arvo arvo arvo arvo;

padding:arvo arvo;

Esimerkki2

Tässä elementissä on täytettä 10px ylhäällä, 5px oikealla, 20px alhaalla ja 50px vasemmalla.