Uchakata na Vipimo vya Nje margin katika CSS

Sasa tutachambua sifa ya margin, ambayo inaweka vipimo vya nje kati ya vipengele vya tovuti. Hebu tuangalie jambo hili inavyotumika kivitendo.

Kwanza kabisa nitaonyesha vizuizi viwili vilivyowekwa ndani ya kila mmoja bila margin (vitashikamana na tutaona mpaka maradufu):

html<div id="parent">
  <div id="child"></div>
</div>

css#parent {
  width: 300px;
  border: 1px solid red;
}
#child {
  height: 100px;
  border: 1px solid green;
}

Результат:

Sasa hebu tuweke margin ya 30px kwa kizuizi cha ndani:

html<div id="parent">
  <div id="child"></div>
</div>

css#parent {
  width: 300px;
  border: 1px solid red;
}

#child {
  height: 100px;
  border: 1px solid green;
  margin: 30px;
}

Результат: