Подобно другим свойствам 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;
}
:
Повторите страницу по данному образцу:
Повторите страницу по данному образцу: