Delo z zamiki margin v CSS

Trenutno bomo razstavili lastnost margin, ki določa zamike med elementi spletnega mesta. Poglejmo, kako izgleda to v praksi.

Za začetek vam prikažem dva bloka, enega v drugem, brez margin (zlepila se bosta in videli bomo dvojno mejo):

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

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

Результат:

In zdaj nastavimo margin na 30px notranjemu bloku:

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

Результат: