Margin xassəsi

margin xassəsi elementin xarici boşluğunu təyin edir. Xassənin dəyəri kimi istənilən ölçü vahidləri ya da brauzerə elementin boşluğunu müstəqil hesablamağa imkan verən auto açar sözü ola bilər. Standart olaraq hər brauzer elementlərə müxtəlif boşluqlar əlavə edə bilər.

Bu xassə aşağıdakı xassələr üçün qısadır: margin-top, margin-right, margin-bottom, margin-left.

Sintaksis

cssselektor {
  margin: deyer;
}

Dəyərlərin sayı

margin xassəsi 1, 2, 3 ya da 4 dəyər qəbul edir, boşluqla ayrılan:

Nümunə

İndi bizim boşluqsuz bir blokumuz olacaq:

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;
}

Результат:

Nümunə

İndi bloka 10px boşluq təyin edək:

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;
}

Результат:

Nümunə

Bloka yuxarı və aşağıdan 10px, sol və sağdan isə 20px boşluq təyin edək:

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;
}

Результат:

Nümunə

Bloka yuxarıdan 5px, sağdan 15px, aşağıdan 25px və soldan 35px boşluq təyin edək:

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;
}

Результат:

Həmçinin bax