Margók

Az egyes elemek a kereten (legyen az akár 0 képpontnyi) kívüli helyfoglalását szabályozhatjuk a margók segítségével.

1. p { margin: 0px 1px 2px 3px; }  

A fenti példában felül 0, jobbra 1, alul 2 és bal oldalt 3 képpontnyi margót állítunk be a bekezdésnek. A négy paraméter helyett használhatunk egyet is, ilyenkor mind a négy oldalon azonos margót kapunk:

1. body { margin: 0px; }  

Ha csak két értéket adunk meg paraméterként, akkor az első paraméter a függőleges, a második paraméter pedig a vízszintes irányú margókra fog vonatkozni:

1. body { margin: 10px 0px; }  

Lehetőségünk van a margók mind a négy oldalon külön-külön történő beállítására is, ezekre mutat példát az alábbi definíció:

1. p {  
2.  margin-left: 3px;  
3.  margin-top: 0px;  
4.  margin-right: 1px;  
5.  margin-bottom: 2px;  
6.  }  

Ezzel a definícióval ugyanazt az eredményt kapjuk, mint a legelső margós példánál bemutatottal.

Kitöltés

Az egyes elemek a kereten (legyen az akár 0 képpontnyi) belüli helyfoglalását szabályozhatjuk a kitöltések segítségével.

1. p { padding: 0px 1px 2px 3px; }  

A fenti példában felül 0, jobbra 1, alul 2 és bal oldalt 3 képpontnyi kitöltést állítunk be a bekezdésnek. A négy paraméter helyett használhatunk egyet is, ilyenkor mind a négy oldalon azonos margót kapunk:

1. body { padding: 5px; }  

Ahogy a margóknál, itt is lehet csak két értéket megadni paraméterként, ahol az első paraméter a függőleges, a második paraméter pedig a vízszintes irányú kitöltést szabályozza:

1. body { padding: 10px 0px; }  

Lehetőségünk van a kitöltések mind a négy oldalon külön-külön történő beállítására is, ezekre mutat példát az alábbi definíció:

1. p {  
2.  padding-left: 3px;  
3.  padding-top: 0px;  
4.  padding-right: 1px;  
5.  padding-bottom: 2px;  
6.  }  

Ezzel a definícióval ugyanazt az eredményt kapjuk, mint a legelső kitöltéses példánál bemutatottal.