Margin īpašība

margin īpašība nosaka elementa ārējo atkāpi. Īpašības vērtība var būt jebkuras mērvienības izmēriem vai atslēgas vārds auto, kas ļauj pārlūkprogrammai patstāvīgi aprēķināt elementa atkāpi. Pēc noklusējuma katra pārlūkprogramma var pievienot elementiem dažādas atkāpes.

Īpašība ir saīsinājums šīm īpašībām: margin-top, margin-right, margin-bottom, margin-left.

Sintakse

cssselektors {
  margin: vērtība;
}

Vērtību skaits

margin īpašība pieņem 1, 2, 3 vai 4 vērtības, uzskaitītas ar atstarpēm:

Piemērs

Tagad mums būs bloks bez atkāpēm:

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

Результат:

Piemērs

Tagad blokam iestatīsim atkāpi 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;
}

Результат:

Piemērs

Iestatīsim blokam atkāpi 10px no augšas un apakšas un 20px - no kreisās un labās puses:

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

Результат:

Piemērs

Iestatīsim blokam atkāpi 5px no augšas, 15px no labās puses, 25px no apakšas un 35px no kreisās puses:

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

Результат:

Skatiet arī