Sifa margin

Sifa margin inaweka padding ya nje ya kipengele. Thamani ya sifa inaweza kuwa yoyote ya vitengo vya ukubwa au sifa muhimu auto, inayomruhusu kivinjari kukokotoa padding ya kipengele peke yake. Kwa msingi, kila kivinjari kinaweza kuongeza padding mbalimbali kwa vipengele.

Sifa hii ni kifupi cha sifa margin-top, margin-right, margin-bottom, margin-left.

Syntax

csskichagua {
  margin: thamani;
}

Idadi ya maadili

Sifa margin inakubali 1, 2, 3 au 4 maadili, yakiorodheshwa kwa nafasi:

Mfano

Sasa tutakuwa na block bila padding:

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

Результат:

Mfano

Sasa tuweke padding ya 10px kwa block:

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

Результат:

Mfano

Tuweke padding ya 10px juu na chini na 20px - kushoto na kulia:

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

Результат:

Mfano

Tuweke padding ya 5px juu, 15px kulia, 25px chini na 35px kushoto:

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

Результат:

Angalia pia