Arbeit mit Margin-Einzügen in CSS

Jetzt werden wir uns mit der Eigenschaft margin befassen, die die Abstände zwischen den Elementen einer Website festlegt. Schauen wir uns an, wie das in der Praxis aussieht.

Zunächst zeige ich Ihnen zwei ineinander verschachtelte Blöcke ohne margin (sie werden zusammenkleben und wir werden einen doppelten Rand sehen):

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

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

Результат:

Und jetzt weisen wir dem inneren Block einen margin von 30px zu:

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

Результат: