Margin хусусияти

margin хусусияти элементнинг ташги мартасини белгилайди. Хусусиятнинг қиймати сифатида ⁅a href="/uzc/markup/manual/css/reference/units/sizes/"⁆ўлчовлар учун бирликлар⁅/a⁆ ёки браузерга элемент мартасини мустақил ҳисоблаш имконини берадиган auto калит сўзи хизмат қилади. Ступи бошида ҳар бир браузер элементларга турли марталарни қўшиши мумкин.

Хусусият quyidagi хусусиятлар учун қисқартма хисобланади: 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;
}

Результат:

Шунингдек қаранг