CSS: margin

Määrab vaheala (ehk tühja ala) ümber plokk-elemendi. Selle vaste on atribuut padding, mis määrab vaheala plokk-elemendi sees!

Atribuut: margin

Üks võimalus vaheala määramiseks on atribuut margin üksinda. Selle abil on võimalik määrata vaheala plokk-elemendi kõigile külgedele kasutades mõõtühikuid (px, pt, em) või protsenti. Atribuudil margin võib olla mitu väärtust:

• ühe väärtuse korral määratakse võrdne vaheala kõigile külgedele;
• kahe väärtuse korral (näiteks margin: 10px 20px) määratakse esimene väärtus (meie näites 10px) ülemisele ja alumisele küljele, teine väärtus (meie näites 20px) vasakule ja paremale küljele;
• kolme väärtuse korral (näiteks margin: 10px 20px 30px) määratakse esimene väärtus ülemisele küljele, teine väärtus vasakule ja paremale küljele, kolmas väärtus alumisele küljele;
• nelja väärtuse korral (näiteks margin: 10px 20px 30px 40px) määratakse esimene väärtus ülemisele küljele, teine väärtus parempoolsele küljele, kolmas väärtus alumisele küljele ning neljas väärtus vasakpoolsele küljele.

Näited:

Vaheala kogu plokk-elemendile:

div {
  margin: 10px;
}

Vaheala kõigile plokk-elemendi külgedele:

div {
  margin: 10px 0 20px 0;
}

Atribuutide seeria: margin-top, margin-right, margin-bottom, margin-left

Vaheala saab määrata igale plokk-elemendi küljele eraldi kasutades konkreetselt selle külje kohta käivat atribuuti. Siinkohal saab kasutada vaid ühekordset väärtust.

• margin-top ülemine külg;
• margin-right parem külg;
• margin-bottom alumine külg;
• margin-left vasak külg.

Näited:

Vaheala vaid ülemisele küljele:

div {
  margin-top: 10px;
}