Четыре значения в свойстве margin в CSS

В случае, если в свойстве margin задано четыре значения, то первое значение задает отступ сверху. Второе значение определяет отступ справа, третье - снизу, а четвертое - слева. To есть мы начинаем сверху и идем по часовой стрелке: верх-право-низ-лево. Смотрите пример:

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

Результат: