Свойство margin - это ваш надежный инструмент для создания «воздуха» вокруг элементов. Оно задает внешние отступы (в отличие от внутренних padding), формируя пространство между рамкой текущего элемента и его соседями или родительским контейнером. Проще говоря, именно margin отвечает за то, насколько далеко элемент будет находиться от остальных объектов на странице.
Главная прелесть этого свойства - удобство. Вместо того чтобы писать четыре отдельных правила, вы можете установить все значения в одной строке. Свойство принимает от одного до четырех значений, разделенных пробелами. Порядок всегда одинаков и начинается с верхней стороны (как часы): верх > право > низ > лево.
Количество заданных параметров напрямую влияет на итоговый вид вашей вёрстки:
- margin:10px 5px 15px 20px; - полный контроль над каждой стороной:
- Сверху - 10px
- Справа - 5px
- Снизу - 15px
- Слева - 20px
- margin:10px 5px 15px; - симметрия по горизонтали:
- Сверху - 10px
- Справа и слева - по 5px
- Снизу - 15px
- margin:10px 5px; - симметрия по вертикали:
- Сверху и снизу - по 10px
- Справа и слева - по 5px
- margin:10px; - равномерное поле со всех сторон:
- Все четыре стороны - по 10px
Важный нюанс, который часто вызывает вопросы у новичков: горизонтальные отступы работают и для строчных (inline), и для блочных элементов. Однако вертикальные отступы (верхние и нижние) действуют исключительно на блочные элементы.
Объединение вертикальных полей
Здесь кроется одна из самых «ловушек» CSS. Если два соседних элемента имеют вертикальные отступы друг к другу, они не складываются, а объединяются:
- При расположении элементов один под другим их вертикальные поля сливаются в одно. Итоговая высота будет равна значению большего из двух полей. Например: если у верхнего элемента
margin-bottom составляет 10px, а у нижнего margin-top - 20px, то итоговое расстояние между ними составит именно 20px, а не 30px. - Аналогичное слияние происходит и между родительским и дочерним элементом (collapse), но только в том случае, если у родителя нет границы (border), внутреннего отступа (padding) или строчного контента, которые могли бы «разделить» эти поля.
Если вам нужно контролировать каждую сторону индивидуально, используйте специфичные свойства: margin-top, margin-right, margin-bottom, margin-left.
Примечание: Не бойтесь экспериментировать! В CSS допустимы отрицательные значения отступов, что позволяет накладывать элементы друг на друга.
| Значение по умолчанию: | 0 |
| Наследуется: | нет |
| Версия: | CSS1 |
| Синтаксис JavaScript: | object.style.margin="10px 5px" |
| Значение | Описание |
| auto | Для вертикальных отступов значение вычисляется как 0. Однако для горизонтальных отступов это мощный инструмент: - Действует только на блочные элементы с фиксированной шириной.
- Если установить
auto слева, элемент уедет влево. Если справа - вправо. А если одновременно и слева, и справа - элемент идеально центрируется по горизонтали! |
| размер | Задайте конкретное значение в любых единицах измерения, поддерживаемых CSS (px, em, rem и т.д.). |
| % | Укажите размер поля в процентах от ширины родительского элемента. Отличный способ для адаптивной вёрстки. |
| inherit | Свойство наследуется от родительского элемента. |
Пример