CSS'de Farklı Kenarlar için Margin Boşlukları

Farklı kenarlar için farklı boşluklar belirlemek amacıyla ayrı özellikler bulunur: margin-left - sol kenar için, margin-right - sağ kenar için, margin-top - üst kenar ve margin-bottom - alt kenar için.

Bir örnek üzerinde inceleyelim:

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

css#parent {
  width: 300px;
  border: 1px solid red;
}
#child {
  margin-top:    10px; /* üstten */
  margin-right:  20px; /* sağdan */
  margin-bottom: 30px; /* alttan */
  margin-left:   40px; /* soldan */
  
  height: 100px;
  border: 1px solid green;
}

Результат: