Својството margin

Својството margin поставува надворешен отстап на елемент. Вредност на својството се било кои единици за димензии или клучно својство auto, кое и овозможува на прелистувачот самостојно да пресметува отстап на елемент. По стандард, секој прелистувач може да додава различни отстапи на елементи.

Својството е кратенка за својствата margin-top, margin-right, margin-bottom, margin-left.

Синтакса

cssселектор {
  margin: вредност;
}

Број на вредности

Својството margin прифаќа 1, 2, 3 или 4 вредности, наведени преку празно место:

Пример

Сега ќе имаме блок без отстапи:

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

Результат:

Пример

А сега на блокот ќе му зададеме отстап од 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;
}

Результат:

Пример

Ќе му зададеме на блокот отстап од 10px одозгора и одоздола и 20px - одлево и оддесно:

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

Результат:

Пример

Ќе му зададеме на блокот отстап од 5px одозгора, 15px оддесно, 25px одоздола и 35px одлево:

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

Результат:

Погледнете исто така