134. Свойство margin для установки отступов

Свойство margin используется очень часто, поэтому важно с ним познакомится. Оно нужно для установления отступа каждого края элемента до внутренних границ родительского элемента. Часто в начале CSS файла можно увидеть следующую запись:

* {
    margin:  0;
    /* и другие */
}

Эта запись означает, что мы сбрасываем отступы всех элементов. Свойство margin имеет следующий синтаксис:

div {
    margin: 1px 2px 3px 4px;
    margin: 1px 2px 3px;
    margin: 1px 2px;
    margin: 1px;
    margin: auto;
    /* и другие */
}

Значения могут измеряться в любых единицах, которые поддерживаются CSS или в процентах. Число значений имеет следующий результат:

• 1 значение - отступ задается со всех сторон одинаково;
• 2 значения - первое задает от верхнего и нижнего краёв, второе от левого и правого краёв;
• 3 значения - первое от верхнего, второе от левого и правого, третье от нижнего краёв;
• 4 значения - задает от всех краёв в следующей последовательности: верх, право, низ, лево.

Также существуют более конкретные аналоги: margin-top, margin-right, margin-bottom и margin-left. Например:

div {
    margin-top: 20px; /* Отступ сверху 20 пикселей */
}
div {
    margin-left: 50%; /* Отступ слева 50 процентов */
}

Похожие уроки Codebra

1. Сделайте отступ сверху при помощи margin размером 10%, а с других сторон по 10px.

– Не пропускайте новостей, подпишитесь на нашу страницу ВКонтакте, Telegram.

– На данный момент на сайте нет возможности оставлять комментарии, но Вы можете спросить в нашей Telegram-группе.