margin-, padding- ja border-ominaisuuksilla lisätään tilaa elementteihin, mikä parantaa verkkosivun ulkoasua, luettavuutta ja käytettävyyttä. Tarkastellaan kutakin ominaisuutta tarkemmin.

margin- ja padding-ominaisuudet

padding

padding tarkoittaa tilaa elementin sisällön ja sen reunan välillä.

padding: top right bottom left

Voimme määrittää padding-arvon usealla eri tavalla.

Lyhytmuoto

/* Same padding of 20px applied to all four sides: */
padding: 20px;

/* Top and bottom paddings of 10px, left and right paddings of 20px: */
padding: 10px 20px;

/* Top padding of 10px, left and right paddings of 20px, bottom padding of 5px: */
padding: 10px 20px 5px;

/* Top padding of 10px, right padding of 15px, bottom padding of 20px, left padding of 25px: */
padding: 10px 15px 20px 25px;

Jokainen täyte erikseen

padding-top: 10px;
padding-right: 15px;
padding-bottom: 25px;
padding-left: 5px;

margin

margin tarkoittaa tilaa elementin ja viereisten elementtien välillä. Se on alue elementin reunan ulkopuolella.

margin: top right bottom left

Voimme määrittää margin-arvon usealla tavalla.

Lyhytmuoto

/* Same margin of 20px applied to all four sides: */
margin: 20px;

/* Top and bottom margins of 10px, left and right margins of 20px: */
margin: 10px 20px;

/* Top margin of 10px, left and right margins of 20px, bottom margin of 5px: */
margin: 10px 20px 5px;

/* Top margin of 10px, right margin of 15px, bottom margin of 20px, left margin of 25px: */
margin: 10px 15px 20px 25px;

Jokainen marginaali erikseen

margin-top: 10px;
margin-right: 15px;
margin-bottom: 25px;
margin-left: 5px;

border-ominaisuus

border viittaa viivaan, joka ympäröi elementin täytteen (padding) ja sisällön. Se on alue, joka erottaa elementin sisällön sen marginaalista.

border: width style color;

Lyhytmuoto

border: 4px solid brown;

Tämä tarkoittaa, että kaikkien sivujen reunus näyttää samalta. Niiden width on 4px, style on solid ja color on brown.

Tarkastellaan seuraavaa esimerkkiä ja selvitetään mahdolliset reunustyylit:

Tuloste

Jokainen reuna erikseen

/* Instead of `top`, can be used any side (`right`, `left`, or `bottom`) */
border-top-color: aquamarine;
border-top-width: 12px;
border-top-style: groove;
border-top-right-radius: 4px;
border-top-left-radius: 8px;