Punimi me marginet (hapat) në CSS

Tani do të merremi me vetinë margin, e cila përcakton hapat ndërmjet elementeve të faqes. Le të shohim se si duket kjo në praktikë.

Për fillim, do t'ju paraqes dy blloqe të vendosura në njëri-tjetrin pa margin (ato do të ngjiten dhe do të shohim një kufi të dyfishtë):

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

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

Результат:

Tani le t'i caktojmë margin prej 30px bllokut të brendshëm:

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

Результат: