marginСвойство определяет самую наружную часть модели коробки, создавая пространство вокруг элемента, вне каких - либо определенных границ.
Поля задаются с использованием длины, процентов или ключевого слова autoи могут иметь отрицательные значения. Вот пример:
.box ( margin: 0 3em 0 3em; )margin является сокращенным свойством и принимает до четырех значений, показанных здесь:
.box ( margin: || || || )Если установлено менее четырех значений, предполагается, что отсутствующие значения основаны на тех, которые определены. Например, следующие два набора правил дадут одинаковые результаты:
.box ( margin: 0 1.5em; ) .box ( margin: 0 1.5em 0 1.5em; )Таким образом, если определено только одно значение, для всех четырех полей будет установлено одно и то же значение. Если заявлено три значения, то это так margin: (top) (left-and-right) (bottom);.
Любое из отдельных полей может быть объявлено от руки, и в этом случае вы должны определить только одно значение для каждого свойства:
.box ( margin-top: 20px; margin-right: 10px; margin-bottom: 20px; margin-left: 10px; )auto и центрирование
Каждое из свойств поля также может принимать значение auto. Значение autoобычно указывает браузеру определить маржу за вас. В большинстве случаев значение autoбудет эквивалентно значению 0(которое является начальным значением для каждого свойства поля) или любому пространству, доступному на этой стороне элемента. Однако autoэто удобно для горизонтального центрирования:
.container ( width: 980px; margin: 0 auto; )В этом примере для центрирования этого элемента по горизонтали в пределах доступного пространства выполняются две вещи:
- Элементу придается заданная ширина
- Левое и правое поля установлены на
auto
Без указанной ширины autoзначения практически не имели бы никакого эффекта, устанавливая для левого и правого полей значение 0или другое доступное пространство внутри родительского элемента.
Следует также отметить, что autoэто полезно только для горизонтального центрирования, поэтому использование autoверхнего и нижнего полей не будет центрировать элемент по вертикали, что может сбить с толку новичков.
Свертывающиеся поля
Вертикальные поля на различных элементах, которые соприкасаются друг с другом (таким образом, не имеют содержимого, отступов или границ, разделяющих их), сжимаются, образуя одно поле, равное большему из смежных полей. Этого не происходит с горизонтальными полями (слева и справа), только с вертикальными (сверху и снизу).
Для иллюстрации возьмите следующий HTML:
Collapsing Margins
Example text.И следующий CSS:
h2 ( margin: 0 0 20px 0; ) p ( margin: 10px 0 0 0; )В этом примере h2элемент имеет нижнее поле 20 пикселей. Элемент абзаца, который следует сразу за ним в источнике, имеет верхнее поле, равное 10 пикселям.
Здравый смысл подсказывает, что толщина вертикального поля между h2абзацем и абзацем будет в общей сложности 30 пикселей (20 пикселей + 10 пикселей). Но из-за схлопывания полей фактическая толщина составляет 20 пикселей. Это показано на встроенной ручке ниже:
Хотя сворачивание полей может показаться на первый взгляд не интуитивным, на самом деле они полезны по нескольким причинам. Во-первых, они предотвращают добавление пустыми элементами дополнительных, обычно нежелательных вертикальных полей.
Во-вторых, они позволяют применять более последовательный подход к объявлению универсальных полей для элементов страницы. Например, заголовки обычно имеют вертикальные поля, как и абзацы. Если поля не сжимались, заголовки, следующие за абзацами (или наоборот), часто требовали сброса полей на одном из элементов, чтобы добиться постоянного расстояния по вертикали.
В-третьих, сворачивание полей также применяется к вложенным элементам. Посмотрите на следующую ручку:
Здесь элемент абзаца имеет верхнее поле, установленное на div30 пикселей, и вложено внутри элемента с верхним полем в 40 пикселей. Кроме того, у h2элемента есть нижнее поле 20 пикселей.
Опять же, здравый смысл подсказывает, что общее пространство вертикальных полей здесь будет составлять 90 пикселей (20 пикселей + 40 пикселей + 30 пикселей), но вместо этого все поля сворачиваются в одно поле в 40 пикселей (самое высокое из трех). Это полезно в большинстве случаев, поскольку нет необходимости переопределять какое-либо из верхних полей, чтобы удалить лишнее вертикальное пространство.
Отрицательная маржа
Как вы могли догадаться, в то время как положительное значение поля отталкивает другие элементы, отрицательное поле будет либо тянуть сам элемент в этом направлении, либо притягивать к нему другие элементы.
Вот пример контейнера с заполнением, а заголовок h2 имеет отрицательные поля, тянущиеся через это заполнение обратно к краям:
См. «
Наиболее распространенный пример использования отрицательных полей» Криса Койера (@chriscoyier)
на CodePen.
Вот пример, когда первый абзац имеет отрицательное нижнее поле, которое подтягивает следующий абзац.
См.
Нижний абзац Pen Negative Margin от Криса Койера (@chriscoyier)
на CodePen.
Поддержка браузера
| Хром | Сафари | Fire Fox | Опера | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Работает | Работает | Работает | Работает | Работает | Работает | Работает |
IE6 подвержен ошибке с удвоенным значением поля с плавающей запятой, которую в большинстве случаев можно решить путем добавления display: inlineк плавающему элементу.