CSS Margini

Mostenite: NU

Dupa cum probabil ati ghicit, proprietatea "margine" se refera la marginea (spatiul) dintre un element (X)HTML si celelalte elemente din jurul lui. Marginea poate fi setata pentru extremitatile "sus", "stanga", "dreapta" si "jos" ale unui element. Vezi exemplul de mai jos:

  margin-top: lungime procente sau auto;
  margin-left: lungime procente sau auto;
  margin-right: lungime procente sau auto;
  margin-bottom: lungime procente sau auto;

Dupa cum vedeti in exemplul de mai sus, aveti la dispozitie 3 variante pentru valori pentru margine: lungime, procent, auto. De asemenea, puteti declara toate cele 4 margini intr-o singura proprietate:

margin: 10px 10px 10px 10px;

Daca folositi varianta din urma, ordinea marginilor este urmatoarea:

sus
dreapta
jos
stanga

Daca este declarata o singura valoare, aceasta este valabila pentru toate cele 4 margini:

margin: 10px;

In cazul in care declarati doar doua sau trei dintre margini, valorile nedeclarate sunt "luate" din partea opusa:

margin: 10px 10px; /* 2 valori */
margin: 10px 10px 10px; /* 3 valori */

Se poate seta marginea si cu valori negative. In cazul in care nu se declara marginile unui element, acestea sunt in mod implicit egale cu zero.

margin: -10px;

Elementele precum paragrafele (<p>) au margini implicite in anumite browsere, asa ca va trebui sa declarati marginea egala cu zero ca sa nu aveti diferente de randare in browsere diferite. Acest lucru se obtine astfel:

p {margin: 0;}

NOTA: daca valoarea pe care o atribuiti marginii este egala cu zero, nu mai este necesara specificarea unitatii de masura, fie ea pixel, punct, sau oricare alta.

Observati in exemplul de mai jos, cum elementele sunt setate la 20px (pixeli) fata de corp (body).

body{
  margin: 20px;
  background: #eeeeee;
  font-size: small;
  font-family: Tahoma, Arial, "Trebuchet MS", Helvetica, sans-serif;
  text-align: left;
}