Margin häsiýeti

margin häsiýeti elementüň daşarky boşlugyny belgileýär. Häsiýetiň bahasy hökmünde islendik ölçeg birlikleri ýa-da brauzeriň özbaşyna elementüň boşlugyny hasaplamagyna mümkinçilik berýän auto açar sözi ulanylyp bilner. Başdaşyna, her brauzer elementlere dürli boşluklar goşup biler.

Bu häsiýet şu häsiýetler üçin gysgaltma bolup hyzmat edýär: margin-top, margin-right, margin-bottom, margin-left.

Sintaksis

cssselektor {
  margin: baha;
}

Baha sany

margin häsiýeti 1, 2, 3 ýa-da 4 bahany boşluk bilen sanawlaýar:

Mysal

Indi bizde boşlugsyz blok bolsun:

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

Результат:

Mysal

Indi bolsa bloka 10px boşluk belleýäris:

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

Результат:

Mysal

Bloka ýokardan we aşakdan 10px, çepden we sagdan 20px boşluk belleýäris:

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

Результат:

Mysal

Bloka ýokardan 5px, sagdan 15px, aşakdan 25px we çepden 35px boşluk belleýäris:

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

Результат:

Şeýle-de görüň