Proprietatea margin

Proprietatea margin stabilește marginea externă a elementului. Valoarea proprietății poate fi orice unitate de măsură pentru dimensiuni sau cuvântul-cheie auto, care permite browserului să calculeze automat marginea elementului. Implicit, fiecare browser poate adăuga elementelor margini diferite.

Această proprietate este o prescurtare pentru proprietățile margin-top, margin-right, margin-bottom, margin-left.

Sintaxă

cssselector {
  margin: valoare;
}

Numărul de valori

Proprietatea margin acceptă 1, 2, 3 sau 4 valori, enumerate prin spațiu:

Exemplu

Acum vom avea un bloc fără margini:

html<div id="parent">
  <div id="elem"></div>
</div>

css#parent {
  border: 1px solid black;
  display: inline-block;
}
#elem {
  margin: 0;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}

Результат:

Exemplu

Acum vom stabili pentru bloc o margine de 10px:

html<div id="parent">
  <div id="elem"></div>
</div>

css#parent {
  border: 1px solid black;
  display: inline-block;
}
#elem {
  margin: 10px;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}

Результат:

Exemplu

Vom stabili pentru bloc o margine de 10px de sus și de jos și de 20px - din stânga și din dreapta:

html<div id="parent">
  <div id="elem"></div>
</div>

css#parent {
  border: 1px solid black;
  display: inline-block;
}
#elem {
  margin: 10px 20px;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}

Результат:

Exemplu

Vom stabili pentru bloc o margine de 5px de sus, 15px din dreapta, 25px de jos și 35px din stânga:

html<div id="parent">
  <div id="elem"></div>
</div>

css#parent {
  border: 1px solid black;
  display: inline-block;
}
#elem {
  margin: 5px 15px 25px 35px;
  border: 1px solid red;
  width: 100px;
  height: 100px;
}

Результат:

Vedeți și