Werk met margin-indentasies in CSS

Nou gaan ons die eienskap margin ondersoek, wat spasie tussen webwerf-elemente bepaal. Kom ons kyk hoe dit in die praktyk lyk.

Om mee te begin, gee ek vir jou twee blokke binne mekaar sonder margin (hulle sal vasplak en ons sal 'n dubbele rand sien):

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

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

Результат:

Laat ons nou 'n margin van 30px aan die binneblok gee:

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

Результат: