Четири стойности в свойството margin в CSS

В случай, че в свойството margin са зададени четири стойности, първата стойност задава отстъп отгоре. Втората стойност определя отстъп отдясно, третата - отдолу, а четвъртата - отляво. Тоест започваме отгоре и вървим по посока на часовниковата стрелка: горе-дясно-долу-ляво. Вижте пример:

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: 10px 20px 30px 40px;
}

Результат: