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

Результат:

Տես նաև