Penggunaan Margin dalam CSS

Sekarang kita akan memahami sifat margin, yang menentukan jarak antara elemen laman web. Mari kita lihat bagaimana ia kelihatan dalam praktik.

Pertama, saya akan tunjukkan dua blok bersarang tanpa margin (mereka akan melekat dan kita akan lihat sempadan berganda):

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

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

Результат:

Sekarang mari kita tetapkan margin 30px kepada blok dalam:

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

Результат: