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