# Несколько значений в свойстве margin

Подобно другим свойствам CSS, свойство `margin` может принимать не только одно значения, но и два, три или четыре. В этом случае разные значения задают отступы для разных сторон.

## Четыре значения

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

`<div id="parent"> <div id="child"></div> </div>` `#parent { width: 300px; border: 1px solid red; } #child { height: 100px; border: 1px solid green; margin: 10px 20px 30px 40px; }`

:

Повторите страницу по данному образцу:

## Два значения

Если передать свойству `margin` два значения, то первое будет задавать отступ одновременно сверху и снизу, а второе - одновременно и справа, и слева.

Давайте посмотрим пример:

`<div id="parent"> <div id="child"></div> </div>` `#parent { width: 300px; border: 1px solid red; } #child { height: 100px; border: 1px solid green; margin: 40px 20px; }`

:

Повторите страницу по данному образцу:

Повторите страницу по данному образцу:

## Три значения

Ну, и наконец, если передать свойству `margin` три значения, то первое будет задавать отступ сверху, третье - отступ снизу, а второе - одновременно отступ слева и справа.

Давайте посмотрим пример:

`<div id="parent"> <div id="child"></div> </div>` `#parent { width: 300px; border: 1px solid red; } #child { height: 100px; border: 1px solid green; margin: 10px 20px 30px; }`

:

Повторите страницу по данному образцу:

Повторите страницу по данному образцу:

←→
↑