Что такое margin в css

margin

CSS свойство margin определяет расстояние по вертикали и/или горизонтали (его также называют "внешний отступ" или "поле") от внешнего края рамки текущего элемента до внутренней границы родительского элемента или до внешнего края элемента, который расположен рядом с текущим элементом.

описание CSS свойства margin

Свойство margin обеспечивает краткий метод установки значений сразу нескольких свойств внешнего отступа в одном объявлении. Оно может содержать от одного до четырех значений, разделяемых между собой пробелами. Если указывается более одного значения, внешний отступ устанавливается начиная с верхней позиции:

порядок значений в свойстве margin

Визуальный эффект будет зависеть от количества заданных значений:

  • margin:10px 5px 15px 20px;
  • Верхнее поле — 10px
  • Правое поле — 5px
  • Нижнее поле — 15px
  • Левое поле — 20px
  • Все 4 поля по 10px

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

Объединение вертикальных полей

  1. Поля сестринских элементов расположенных друг под другом и находящихся в потоке документа объединяются в одно общее. Высота полученного поля равняется высоте большего из двух полей, например: поле верхнего элемента (margin-bottom) составляет 10px, а нижнего элемента (margin-top) — 20px, единое поле в этом случае будет высотой 20px.
  2. Объединение полей родительского и дочернего элемента находящихся в потоке документа происходит, если родительский элемент не имеет ничего из того, что могло бы отделять его внешний отступ от внешнего отступа дочернего элемента (рамки, внутреннего отступа или строчного содержимого). Также объединение полей не будет происходить, если родительскому элементу установить свойство overflow со значением hidden или auto. Плюс от этого способа заключается в том, что размер родительского элемента не увеличивается.

Для установки внешних отступов отдельно для каждой стороны элемента, используются следующие свойства: margin-top, margin-bottom, margin-left, margin-right.

margin

Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

Отступ от левого края элемента

Рис. 1. Отступ от левого края элемента

Если у элемента нет родителя, отступом будет расстояние от края элемента до края окна браузера с учетом того, что у самого окна по умолчанию тоже установлены отступы. Чтобы от них избавиться, следует устанавливать значение margin для селектора <body> равное нулю.

Свойство margin позволяет задать величину отступа сразу для всех сторон элемента или определить ее только для указанных сторон.

Синтаксис

margin: [значение | проценты | auto] <1,4>| inherit

Значения

Разрешается использовать одно, два, три или четыре значения, разделяя их между собой пробелом. Эффект зависит от количества значений и приведен в табл. 1.

Табл. 1. Зависимость от числа значений
Число значений Результат
1 Отступы будут установлены одновременно от каждого края элемента.
2 Первое значение устанавливает отступ от верхнего и нижнего края, второе &#8212; от левого и правого.
3 Первое значение задает отступ от верхнего края, второе &#8212; одновременно от левого и правого края, а третье &#8212; от нижнего края.
4 Поочередно устанавливается отступ от верхнего, правого, нижнего и левого края.

Величину отступов можно указывать в пикселах (px), процентах (%) или других допустимых для CSS единицах. Значение может быть как положительным, так и отрицательным числом.

auto Указывает, что размер отступов будет автоматически рассчитан браузером. inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 2.

Рис. 2

Рис. 2. Применение свойства margin

Объектная модель

[window.]document.getElementById(" elementID ").style.margin

Браузеры

Internet Explorer 6 в режиме совместимости (quirk mode) не поддерживает выравнивание блока по центру с помощью правила margin: 0 auto . Также в этом браузере наблюдается ошибка с удвоением значения левого или правого отступа для плавающих элементов, вложенных в родительские элементы. Удваивается тот отступ, который прилегает к стороне родителя. Проблема обычно решается добавлением display: inline для плавающего элемента.

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

Примечание

У блочных элементов расположенных рядом друг с другом по вертикали наблюдается эффект схлопывания, когда отступы не суммируются, а объединяются между собой. Само схлопывание действует на два и более блока (один может быть вложен внутрь другого) с отступами сверху или снизу, при этом примыкающие отступы комбинируются в один. Для отступов слева и справа схлопывание никогда не применяется.

CSS свойство margin

CSS свойство margin устанавливает величину внешнего отступа от каждого края элемента в одном объявлении.

CSS свойство margin объединяет в себе такие свойства как margin-top, margin-right, margin-bottom и margin-left. Это свойство может иметь от одного до четырех значений.

На изображении темно-серым цветом обозначена зона за которую отвечает свойство margin :

  1. При указании четырёх значений ( 5px 10px 15px 20px ) — порядок расстановки отступов будет следующий: Top( 5px ) — Right( 10px ) — Bottom( 15px ) — Left( 20px ). Для запоминания порядка расстановки отступов в одном объявлении можно использовать английское слово TRouBLe(где T — top, R — right, B — bottom, L — left).
  2. При указании трёх значений ( 5px 10px 15px ) — порядок расстановки отступов будет следующий: Top ( 5px ) — Right & Left ( 10px ) — Bottom ( 15px ).
  3. При указании двух значений ( 5px 10px ) — первое значение( 5px ) будет задавать размер отступа от верха и от низа, второе ( 10px ) значение — отступы слева и справа.
  4. При указании одного значения ( 5px ) — отступ со всех сторон будет одного размера — 5px .

Поддержка браузерами

Свойство Chrome Firefox Opera Safari IExplorer Edge
margin 1.0 1.0 3.5 1.0 6.0 12.0

Значения свойства

Значение Описание
length Определяет отступ в пикселях, см и др. единицах. Значение по умолчанию 0. Допускаются отрицательные значения.
% Определяет отступ в процентах от содержащего блока родительского элемента. Допускаются отрицательные значения.
auto Браузер вычисляет отступ самостоятельно.
initial Устанавливает свойство в значение по умолчанию.
inherit Указывает, что значение наследуется от родительского элемента.

Версия CSS

Наследуется

Анимируемое

Пример использования

Пример использования отступов элемента. Пример использования отступов элемента. CSS свойства

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *