Darbība ar atkāpēm margin CSS

Tagad mēs analizēsim īpašību margin, kas nosaka atkāpes starp vietnes elementiem. Apskatīsim, kā tas izskatās praksē.

Sākumā es jums parādīšu divus bloķus, kas atrodas viens otrā, bez margin (tie salipts kopā un mēs redzēsim dubultu apmali):

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

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

Результат:

Un tagad piešķirsim margin 30px iekšējam blokam:

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

Результат: