Margin 0: Всё, что вам нужно знать про CSS Margin / Хабр

margin — Веб-технологии для разработчиков

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

/* Применяется ко всем четырём сторонам */
margin: 1em;

/* по вертикали | по горизонтали */
margin: 5% auto;

/* сверху | горизонтально | снизу */
margin: 1em auto 2em; 

/* сверху | справа | снизу | слева */
margin: 2px 1em 0 auto;

/* Глобальные значения */
margin: inherit;
margin: initial;
margin: unset;

<div>
  <div>
    <div>
      <div>margin: 0</div>
    </div>
    <div>
      <div>margin: 1em</div>
    </div>
    <div>
      <div>margin: 5% auto</div>
    </div>
    <div>
      <div>margin: 1em auto 2em</div>
    </div>
    <div>
      <div>margin: 5px 1em 0 auto</div>
    </div>
    <div>Все вышеприведенные блоки имеют одинаковую ширину 50%</div>
  </div>
</div>

html,body {
  height: 100%;
  box-sizing: border-box;
}

.grid {
  width: 100%;
  height: 100%;
  display: flex;
  background: #EEE;
  font: 1em monospace;
}

.col {
  display: flex;
  flex: 1 auto;
  flex-direction: column;
}

.cell {
  box-sizing: border-box;
  margin: .5em;
  padding: 0;
  background-color: #FFF;
  overflow: hidden;
  text-align: center;
}

.note {
  background: #fff3d4;
  padding: 1em;
  margin: .5em;
  font: .8em sans-serif;
  text-align: center;
  flex: none;
}

.m {
  display: block;
  width: 50%;
  text-align: left;
  background: #E4F0F5;
  padding: .5em;
  border: 1px solid;
}

.m0 { margin: 0; }
.m1 { margin: 1em; }
.m2 { margin: 5% auto; }
.m3 { margin: 1em auto 2em; }
.m4 { margin: 5px 1em 0 auto; }

Синтаксис

Свойство margin может быть задано с использованием одного, двух, трех или четырех значений. Каждое значение имеет тип <length>,

• Когда определено одно значение, такое значение определено для всех четырех сторон.
• Когда определены два значения, то первое значение определяет внешний отступ для верхней и нижней стороны, а второе значение определяет отступ для левой и правой стороны.
• Когда определены три значение, то первое значение определяет внешний отступ для верхней стороны, второе значение определяет внешний отступ для левой и правой стороны, а третье значение определяет отступ для нижней стороны.
• Когда определены четыре значения, они определяют внешние отступы для верхней стороны, справа, снизу и слева в рассмотренном порядке (по часовой стрелке).

Значения

length

Размер отступа как фиксированное значение.

percentage

Размер отступа в процентах относительно ширины родительского блока.

auto

Браузер выбирает подходящее значение для использования. Например, в некоторых случаях это значение может быть использовано для центрирования элемента.

Формальный синтаксис

[ <length> | <percentage> | auto ]{1,4}

Примеры

Простой пример

HTML

<div>Этот элемент отцентрирован.</div>

<div>Этот элемент расположен за пределами своего контейнера.</div>

CSS

.center {
  margin: auto;
  background: lime;
  width: 66%;
}

.outside {
  margin: 3rem 0 0 -3rem;
  background: cyan;
  width: 66%;
}

Больше примеров

margin: 5%;                 /* все стороны:  отступ 5% */

margin: 10px;               /* все стороны:  отступ 10px */

margin: 1.6em 20px;         /* верх и низ:   отступ 1.6em */
                            /* право и лево: отступ 20px */

margin: 10px 3% 1em;        /* верх:         отступ 10px */
                            /* право и лево: отступ 3% */
                            /* низ:          отступ 1em */

margin: 10px 3px 30px 5px;  /* верх:   отступ 10px */
                            /* право:  отступ 3px */
                            /* низ:    отступ 30px */
                            /* лево:   отступ 5px */

margin: 2em auto;           /* верх и низ: отступ 2em */
                            /* блок отцентрирован горизонтально */

margin: auto;               /* верх и низ: отступ 0 */
                            /* блок отцентрирован горизонтально */

Примечание

Горизонтальное выравнивание

Чтобы центрировать что-то горизонтально в современных браузерах, вы можете использовать

Однако в старых браузерах, таких как IE8-9, которые не поддерживают технологию Flexible Box, они недоступны. Чтобы центрировать элемент внутри своего родителя, используйте margin: 0 auto; .

Схлопывание отступов

Иногда внешние отступы (margins) для верхней и нижней сторон схлопываются в один отступ, который равен наибольшему из двух отступов. Смотри Схлопывание внешних отступов для получения большей информации.

Спецификации

Совместимость с браузерами

Легенда

Полная поддержка  

Полная поддержка

Смотрите замечания реализации.

Смотрите замечания реализации.

Смотрите также

Свойство margin | CSS справочник

Определение и применение

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.

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

CSS синтаксис:

margin:"length | auto | initial | inherit";

JavaScript синтаксис:

object.style.margin = "15px"

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

Версия CSS

Наследуется

Анимируемое

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

<!DOCTYPE html>
<html>
<head>
<title>Отступы элемента.</title>
<style> 
h2 {
margin:15px 100px 50px; /* Порядок расстановки отступов будет следующий: Top (15px) - Right & Left (100px) - Bottom (50px). */
}
.primer1 {
width : 50px; /* задаём ширину блока */
height : 50px; /* задаём высоту блока */
background-color : yellow; /* задаём цвет заднего фона */
margin : 25px; /* величина отступа со всех сторон будет одного размера - 25px. */
border : 1px solid; /* задаём сплошную границу для всех сторон элемента */
}
.primer2 {
width :50px; /* задаём ширину блока */
height :50px; /* задаём высоту блока */
background-color : lime; /* задаём цвет заднего фона */
margin : 25px 75px; /* первое значение(25px) будет задавать размер отступа от верха и от низа, второе (75px) значение - отступы слева и справа.  */
border : 1px solid; /* задаём сплошную границу для всех сторон элемента */
}
.primer3 {
width :50px; /* задаём ширину блока */
height :50px; /* задаём высоту блока */
background-color : blue; /* задаём цвет заднего фона */
margin : -40px 25px 25px 100px; /* порядок расстановки отступов будет следующий: Top(- 40px) - Right(25px) - Bottom(25px) - Left(100px). */
border : 1px solid; /* задаём сплошную границу для всех сторон элемента */
}
</style>
</head>
	<body>
		<h2>Заголовок первого уровня</h2>
		<div class = "primer1"></div>
		<div class = "primer2"></div>
		<div class = "primer3"></div>
	</body>
</html>

Margins внешние отступы CSS уроки для начинающих академия

Этот элемент имеет поле 70px.

Поля CSS

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

С помощью CSS вы имеете полный контроль над полями. Существуют свойства для настройки поля для каждой стороны элемента (сверху, справа, снизу и слева).

Маржа-отдельные стороны

CSS имеет свойства для указания поля для каждой стороны элемента:

• margin-top
• margin-right
• margin-bottom
• margin-left

Все свойства полей могут иметь следующие значения:

• Auto-обозреватель вычисляет маржу
• length — определяет поле в пикселах, PT, cm и т. д.
• % — задает поле в% от ширины содержащего элемента
• Наследование-указывает, что поле должно быть унаследовано от родительского элемента

Совет: Допустимы отрицательные значения.

В следующем примере устанавливаются различные поля для всех четырех сторон элемента <p>:

Пример

p {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;
}

Маржа-Сокращенное свойство

Чтобы сократить код, можно указать все свойства полей в одном свойстве.

Свойство margin является сокращенным свойством для следующих свойств отдельных полей:

• margin-top
• margin-right
• margin-bottom
• margin-left

Итак, вот как это работает:

Если свойство margin имеет четыре значения:

• margin: 25px 50px 75px 100px;
  • top margin is 25px
  • right margin is 50px
  • bottom margin is 75px
  • left margin is 100px

Пример

p {
    margin: 25px 50px 75px 100px;
}

CSS margin:auto — Как это работает?

Использование margin:auto, чтобы отцентрировать блочный элемент по горизонтали, это хорошо известный способ. Но задумывались ли вы, как это работает?

Результат действия значения auto зависит типа элемента и контекста. Для отступов сверху CSS auto может означать одно из двух: занять все свободное пространство или 0 пикселей. В зависимости от этого будет задаваться различная структура.

Это наиболее распространенный способ использования auto для отступов. Если мы задаем auto для левого и правого отступов одного элемента, они равномерно займут все доступное в контейнере по горизонтали пространство. Таким образом элемент расположится по центру.

Посмотреть пример

Это работает только для горизонтальных отступов. Но не будет работать для плавающих и строчных элементов. А также для абсолютно и фиксировано позиционированных элементов.

auto поровну распределяет все свободное пространство между правым и левым отступами. Но что произойдет, если мы зададим это значение только для одного из отступов? Тогда он займет все доступное пространство, и элемент будет смещен к правому или левому краю.

Посмотреть пример

Как упоминалось выше, auto не работает для плавающих, строчных и абсолютно позиционированных элементов. Для них уже определена структура, так что в использовании margin auto нет смысла.

Это будет только нарушать изначальную структуру. В том числе и для отступа текста сверху CSS. Следовательно, auto будет задавать значение 0 пикселей для отступов этих элементов.

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

Значение auto будет определять отступ в 0 пикселей, когда для блочного элемента задана ширина auto или 100%. Обычно он занимает всю ширину контейнера, следовательно, на ширину отступа останется 0 пикселей.

auto и для отступа сверху CSS, и для нижнего отступа всегда вычисляется как 0 пикселей (за исключением абсолютно позиционированных элементов). В спецификации W3C указано следующее:

«Если для “margin-top” или “margin-bottom” задано «auto», для них используется значение, равное 0″.

Это связано с тем, что на веб-странице все элементы чаще всего распределяются вертикально. Поэтому, отцентрировав элемент по высоте в контейнере, мы не добьемся того, что он будет отображаться вертикально по центру относительно самой страницы, как это происходит с центрированием по горизонтали.

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

Или из-за эффекта объединения отступов (слияния отступов соседних элементов). Это еще одно исключение из данного правила определения вертикальных отступов.

Так как для абсолютно позиционированных элементов введено исключение, можно использовать значение auto, чтобы выровнять их по центру вертикально и горизонтально. Но сначала нужно выяснить, когда margin:auto будет работать именно так для отступа сверху CSS.

В другой спецификации W3C сказано:

«Если для всех трех позиций (“left”, “width” и “right”) задано значение «auto», сначала установите 0 для “margin-left” и “margin-right…»
» Если «auto» задано только для “margin-left” и “margin-right», тогда решите уравнение с дополнительным условием, чтобы для обоих отступов была задана одинаковая ширина».

Здесь довольно подробно описана ситуация, касающаяся значения auto для горизонтальных отступов. Чтобы эти отступы имели одинаковый размер, для left, width и right не должно задаваться значение auto (их значение по умолчанию). Чтобы отцентрировать элемент по горизонтали, нужно задать определенное значение для ширины абсолютно позиционируемого элемента, а left и right при этом должны иметь равные значения.

В спецификации также упоминается что-то подобное и для отступов сверху CSS div.

«Если для «top», «height» и «bottom» задано значение «auto» , установите для «top» позицию static…»

«Если для одной из трех позиций не установлено значение «auto»: если для «top» и «bottom» установлено значение «auto», решите уравнение с дополнительным условием, чтобы задать для этих отступов одинаковые значения».

Следовательно, чтобы отцентрировать по вертикали абсолютно позиционируемый элемент top, height и bottom не должны иметь значение auto.

Теперь, объединив все это, мы получим следующее:

Посмотреть пример

Если вам требуется сместить элемент на странице вправо или влево без контейнерных элементов (например, как в случае с float), помните, что есть возможность использовать для отступов значение auto.

Преобразование элемента в абсолютно позиционируемый только для того, чтобы отцентрировать его по вертикали (отступы сверху CSS), не лучшая идея. Существуют и другие варианты, такие как flexbox и CSS transform, которые больше подходят для этого.

Данная публикация представляет собой перевод статьи «CSS – margin auto – How it Works» , подготовленной дружной командой проекта Интернет-технологии.ру

поля и отступы — учебник CSS

В предыдущей главе мы упоминали о таких свойствах CSS, как margin (поле) и padding (отступ). Теперь мы остановимся на них более подробно и рассмотрим, чем они отличаются друг от друга и какие особенности имеют.

Создавать промежутки между элементами можно и тем, и другим способом, но если padding – это отступ от содержимого до края блока, то margin – это расстояние от одного блока до другого, межблоковое пространство. На скриншоте показан наглядный пример:

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

Для установки полей или отступов в CSS от каждой стороны элемента существуют следующие свойства:
 

Отступы:

• padding-top: значение;
• padding-right: значение;
• padding-bottom: значение;
• padding-left: значение;

Поля:

• margin-top: значение;
• margin-right: значение;
• margin-bottom: значение;
• margin-left: значение;

Значения могут быть указаны в любых единицах CSS – px, em, % и т. д. Пример: margin-top: 15px.

Также существует очень удобная вещь как сокращенная запись margin и padding CSS. Если вам необходимо задать поля или отступы для всех четырех сторон элемента, совсем необязательно записывать свойство для каждой стороны по отдельности. Всё делается проще: для margin и padding можно указывать сразу 1, 2, 3 или 4 значения. От количества значений зависит, как распределяются настройки:

Те же правила касаются и свойства margin CSS. Обратите внимание на то, что для margin можно использовать и отрицательные значения (например, -3px), которые иногда бывают весьма полезными.

Схлопывание margin

Представьте ситуацию: два блочных элемента находятся друг над другом и им заданы поля margin. Для верхнего блока установлено значение margin: 60px, а для нижнего – margin: 30px. Логично было бы предположить, что два граничащих поля двух элементов просто соприкоснутся и в итоге промежуток между блоками будет равен 90 пикселям.

Однако дела обстоят по-другому. На самом деле в такой ситуации проявляется эффект, который называют схлопыванием, когда из двух примыкающих полей элементов выбирается наибольший по размеру. В нашем примере итоговый промежуток между элементами будет равен 60 пикселям.

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

• Когда оба значения margin положительные, итоговый размер поля будет равен бóльшему значению.
• Если одно из значений является отрицательным, то для вычисления размера поля нужно получить сумму значений. Например, при значениях 20px и -18px размер поля будет равен:
  20 + (-18) = 20 — 18 = 2 пикселя.
• Если оба значения отрицательные, сравниваются модули этих чисел и выбирается число, бóльшее по модулю (следовательно, меньшее из отрицательных чисел). Пример: необходимо сравнить значения полей -6px и -8px. Модули сравниваемых чисел равны 6 и 8 соответственно. Отсюда следует, что 6 8, то есть, -6 > -8. Итоговый размер поля равен -8 пикселей.
• В случае, когда значения указаны в разных единицах CSS, они приводятся к одной, после чего сравниваются и выбирается бóльшее значение.
• Размер margin для дочерних элементов определяется еще более интересно: если у потомка поле margin больше, чем у родителя, то приоритет отдается ему. В этом случае размеры верхнего и нижнего полей родителя станут такими, как задано у потомка. При этом расстояния между родителем и потомком не будет.

Далее в учебнике: блочные и строчные элементы HTML, свойство display CSS.

Организация отступов в верстке (margin/padding) / Хабр

Цель этой статьи не усложнить простые вещи, а акцентировать внимание на известных стандартах, о которых почему-то забывают. Важно соблюдать осмысленную структуру во всех аспектах верстки, и не менее важно придерживаться ее в отступах. И одним из основных принципов верстки является гибкость. А именно, возможность легко вносить какие-либо изменения и ничего при этом не сломать. Правильное обращение с margin и padding играет очень большую роль в этом деле.

Ниже перечисленные принципы выполняются в среде позиционирования элементов на странице. В элементах декора тоже выполняются. Но не так категорично.

Основные принципы:

1. Отступы идут от предыдущего элемента к следующему.
2. Отступ задается последнему возможному элементу в доме.
3. Отступы нельзя задавать для независимых элементов ( БЭМ блок ).
4. У последнего элемента группы, отступ обнуляется (всегда).

Отступы идут от предыдущего элемента к следующему.

Это значит.что такие свойства как margin-left и margin-top не используются (не без исключений). С padding все немного наоборот (кроме того, что он используется для, декоративных целей, увеличения области ссылки и т.д.). Когда блоку нужен отступ сверху или слева, он его получает за счет padding-top и padding-left родителя.

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

Отступ задается последнему возможному элементу в доме

В примере 3 списка, в следующей структуре:

<section>
  <div>
    <div>
      <ul>
        <li><a href="">Далеко-далеко, за словесными.</a></li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
      </ul>
    </div>
  </div>

  <div>...</div>

  <div>...</div>
</section>

Не за счет дочерних элементов, а за счет соседних делается отступ.

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

Этот пример довольно простой. Но если представить на много большую вложенность, где кто-то намусорил отступами, когда какие-то маргины схлопываются. а какие-то суммируются с падингами.

<section>
  <h2>headline in a section of seven words</h2>
</section>

Самая простая причина, по которой стоит придерживаться данного принципа, это чтоб было проще найти отступ в будущем, либо вам, либо тому, кто будет в дальнейшем работать с вашей версткой. Это если говорить про удобство.

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

Отступы нельзя задавать для независимых элементов ( БЭМ блок )

Если нужно сделать блоку отступ. Без ущерба это делается с помощью:

• Наследование через элемент (если вытащить этот блок с элемента, отступа не будет, и его можно будет просто разместить в другом месте).
• Добавление класса (можно сделать блок элементом).
• Обертка (как блок, у которого роль, только в позиционировании).

.block__item > .block { margin-right: 10px; }

.block.block__item { margin-right: 10px; }

.block-wrap > .block { margin-right: 10px; }

У последнего элемента группы, отступ обнуляется (всегда)

<ul>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
  <li><a href=""></a></li>
</ul>

<img src="" alt="">

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

Для последней li отступ обнуляется. И отступ делается между соседними элементами ul и img. О чем говорилось во втором принципе.

Возьмем другой пример:

<aside>
  <div>
    <article>
      <h4>...</h4>
      
      <p>...</p>
      
      <aside>
        <time>10.10.10</time>
      </aside>
    </article>
  </div>

  <div>...</div>
  
  <div>...</div>
</aside>

Интересует нас отступ между новостями, которые задается .blog-preview__item { margin-bottom: 20px; }. Последний margin обнуляется, а нижний отступ делается за счет padding blog-preview. О чем говорилось во втором принципе.

Чаще чем другие псевдоклассы, надо использовать :last-child.

.item:not(:last-child) { 
  margin-bottom: 20px; 
}

// или //

.item {
  // другие стили //
  margin-bottom: 20px; 

  &:last-child {
    margin-bottom: 0;
  }
}

// или margin-top, основная идея здесь, не в направлении маргина, а в отсутствии лишнего //

.item + .item {
  margin-top: 20px;
}

// или //

.item {
  // другие стили //

  & + & {
    margin-top: 20px;
  }
}

Исключения

• В первую очередь это добавление текстового контента через админку. Здесь отлично справляется подход к отступам заданный браузером. Но этот подход нельзя считать подходящим в обычной верстке как и несколько <br> в коде подряд.
  
  
• «Динамические элементы». Когда элемент появляется после какого-то блока, то он появится со своим отступом.
  
• Иногда вертикальные падинги лучше задавать дочерним блокам, нежели всей секции. Если в перспективе, на других страницах в том же месте, это относится ко второму принципу, задавать отступ для последнего возможного, вот иногда секция последний, но не возможный.
• Отрицательные маргины, auto, padding для контейнера.
  

P. S. Советую ознакомиться с публикацией Кастомный подход для нормализации и сброса стилей (custom-reset.css). И советую использовать css линтеры. И кому интересно, может решить css задачку.

margin-left — Веб-технологии для разработчиков

Свойство CSS  margin-left устанавливает внешний отступ слева от элемента. Положительное значение увеличивает расстояние между соседними элементами, тогда как отрицательное — сокращает.

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам пулл-реквест.

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

В редких случаях, когда ширина (т.е., когда все значения width, margin-left, border, padding, область содержимого, и margin-right определены), margin-left игнорируется, и будет иметь такое же расчётное значение, как и auto .

Синтаксис

/* <длина> значения */
margin-left: 10px;  /* абсолютная длина */
margin-left: 1em;   /* относительно размера текста */
margin-left: 5%;    /* относительно ширины родительского блока */

/* Значения-ключевые слова */
margin-left: auto;

/* Глобальные значения */
margin-left: inherit;
margin-left: initial;
margin-left: unset;

Свойство margin-left может быть выражено как ключевое слово auto, как <число>, или как <процент>. Значение может быть положительным, нулевым или отрицательным.

Значения

<length>

Размер отступа — фиксированная величина.

<percentage>

Размер отступа в процентах — размер относительно длины родительского блока.

auto

Внешний отступ слева получает долю неиспользованного горизонтального пространства, определяется в основном выбранным способом разметки. Если значения margin-left и margin-right одновременно установлены как auto, расчетное пространство распределяется равномерно. Эта таблица кратко излагает различные:

Значение display	Значение float	Значение position	Расчётное значение auto	Комментарий
inline, inline-block, inline-table	любое	static или relative	0	Строчный способ разметки
block, inline, inline-block, block, table, inline-table, list-item, table-caption	любое	static или relative	0, кроме случаев, когда margin-left и margin-right установлены как auto. В этом случае устанавливается значение, центрирующее элемент внутри его родителя	Блочный способ разметки
block, inline, inline-block, block, table, inline-table, list-item, table-caption	left или right	static или relative	0	Блочный способ разметки (плавающие элементы)
любое table-*, кроме table-caption	любое	любое	0	Внутренние table-* элементы не имеют отступов, вместо этого используйте border-spacing
любое, кроме flex, inline-flex, или table-*	любое	fixed или absolute	0, кроме случаев, когда margin-left и margin-right установлены как auto. В этом случае, устанавливается значение центрирующее границы области внутри доступной  width (ширины), если  значение фиксировано.	Способ разметки абсолютным позиционированием
flex, inline-flex	любое	любое	0, кроме случаев, когда есть положительное горизонтальное свободное пространство. В этом случае, распределяется равномерно по всем горизонтальным auto отступам.	Способ разметки с помощью flexbox

Формальный синтаксис

<length> | <percentage> | auto

Примеры

.content { margin-left: 5%; }
.sidebox { margin-left: 10px; }
.logo    { margin-left: -5px; }

Спецификации

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

Легенда

Полная поддержка  

Полная поддержка

Смотрите замечания реализации.

Смотрите замечания реализации.

CSS Маржа

Этот элемент имеет поле 70 пикселей.

Поля CSS

Свойства CSS margin используются для создания пространства вокруг элементов, вне каких-либо определенных границ.

С CSS у вас есть полный контроль над полями. Есть свойства для установки поля для каждой стороны элемента (сверху, справа, снизу и слева).

Маржа — отдельные стороны

CSS имеет свойства для указания поля для каждого сторона элемента:

• верхняя граница
• поле справа
• нижнее поле
• поле слева

Все свойства полей могут иметь следующие значения:

• авто — браузер рассчитывает маржу
• длина — задает поле в пикселях, пт, см и т. Д.
• % — задает отступ в% от ширины содержащего элемента
• inherit — указывает, что маржа должна быть унаследована от родительского элемента

Совет: Допускаются отрицательные значения.

Пример

Установите разные поля для всех четырех сторон элемента

:

p {
margin-top: 100 пикселей;
нижнее поле: 100 пикселей;
поле справа: 150 пикселей;
маржа слева: 80 пикселей;
}

Маржа — сокращенная собственность

Чтобы сократить код, можно указать все свойства полей в одно свойство.

Свойство margin является сокращенным свойством для следующих индивидуальных свойств полей:

• верхняя граница
• поле справа
• нижнее поле
• поле слева

Итак, вот как это работает:

Если свойство margin имеет четыре значения:

• поля: 25px 50px 75px 100px;
  • верхнее поле 25 пикселей
  • правое поле — 50 пикселей
  • нижнее поле — 75 пикселей
  • левое поле — 100 пикселей

Пример

Используйте сокращенное свойство поля с четырьмя значениями:

p {
поле: 25px 50px 75px 100px;
}

Если свойство margin имеет три значения:

• поля: 25px 50px 75px;
  • верхнее поле — 25 пикселей
  • правое и левое поля 50 пикселей
  • нижнее поле — 75 пикселей

Пример

Используйте сокращенное свойство поля с тремя значениями:

п {
маржа: 25px 50px 75px;
}

Если свойство margin имеет два значения:

• поле: 25 пикселей 50 пикселей;
  • верхнее и нижнее поля 25 пикселей
  • правое и левое поля — 50 пикселей

Пример

Используйте сокращенное свойство поля с двумя значениями:

п {
маржа: 25px 50px;
}

Если свойство margin имеет одно значение:

• маржа: 25 пикселей;
  • все четыре поля по 25 пикселей

Пример

Используйте сокращенное свойство поля с одним значением:

p {
маржа: 25 пикселей;
}

Авто Значение

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

Затем элемент займет указанную ширину, а оставшееся пространство будут поровну разделены между левым и правым полями.

Пример

Использованная маржа: авто:

div {
ширина: 300 пикселей;
маржа: авто;
граница: сплошной красный 1px;
}

Наследственная ценность

Этот пример позволяет наследовать левое поле элемента

от родительского элемента. (

  
Target 
  Target  
  Target  
Target 
  

  
Target 
  

  
Target 
  

  
Target 
  

  
 

  -mt-8
  

  

   Цель 
  

  // tailwind.config.js
  module.exports = {
    theme: {
      интервал: {
+ sm: '8px',
+ md: '16px',
+ lg: '24px',
+ xl: '48px',
      }
    }
  }  

  // tailwind.config.js
  module.exports = {
    theme: {
      прибыль: {
+ sm: '8px',
+ md: '16px',
+ lg: '24px',
+ xl: '48px',
      }
    }
  }  

  / / tailwind.config.js
  module.exports = {
    theme: {
      продлить: {
        прибыль: {
+ '-72': '-18rem',
        }
      }
    }
  }  

  // tailwind.config.js
  module.exports = {
    варианты: {
      //...
- маржа: ['отзывчивый'],
+ маржа: ['отзывчивый', 'наведение', 'фокус'],
    }
  }  

  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+ маржа: false,
    }
  }  

 / * Применить ко всем четырем сторонам * /
маржа: 1em;
маржа: -3px;

/ * вертикальный | горизонтальный * /
маржа: 5% авто;

/ * наверх | горизонтальный | низ */
маржа: 1em auto 2em;

/ * наверх | право | внизу | осталось */
маржа: 2px 1em 0 авто;

/ * Глобальные значения * /
маржа: наследование;
маржа: начальная;
маржа: не задана;
 

 [<длина> | <процент> | авто] {1,4} 

 
 Этот элемент центрирован. 

 Этот элемент расположен за пределами своего контейнера. 
 

.center {
маржа: авто;
фон: салатовый;
ширина: 66%;
}

.вне {
маржа: 3 бэр 0 0 -3 бэр;
фон: голубой;
ширина: 66%;
} 

 маржа: 5%; / * Все стороны: маржа 5% * /

маржа: 10 пикселей; / * Все стороны: поле 10 пикселей * /

маржа: 1.6em 20px; / * сверху и снизу: поле 1.6em * /
                            / * слева и справа: поле 20 пикселей * /

маржа: 10px 3% -1em; / * верх: поле 10 пикселей * /
                            / * слева и справа: маржа 3% * /
                            / * внизу: поле -1em * /

margin: 10px 3px 30px 5px; / * верх: поле 10 пикселей * /
                            / * справа: поле 3px * /
                            / * снизу: поле 30 пикселей * /
                            / * слева: поле 5 пикселей * /

маржа: 2em auto; / * верх и низ: поле 2em * /
                            / * Коробка центрируется по горизонтали * /

маржа: авто; / * верх и низ: поле 0 * /
                            / * Коробка центрируется по горизонтали * /