margin - itgirlschool/wiki GitHub Wiki

Задаёт размер внешнего отступа вокруг элемента.

Чтобы сделать отступ только с одной стороны, используй margin-top (сверху), margin-right (справа), margin-bottom (снизу) или margin-left (слева).

Синтаксис.

Применяется ко всем четырём сторонам:

.selector {
  margin: 1em;
  margin: -3px;
}

Сверху и снизу | слева и справа:

.selector {
  margin: 5% auto;
}

Сверху | слева и справа | снизу:

.selector {
  margin: 1em auto 2em;
}

Сверху | справа | снизу | слева:

.selector {
  margin: 2px 1em 0 auto;
}

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

Отрицательное значение margin тоже возможно: вместо отступа, оно, наоборот, ставит элемент ближе к соседнему.

Можно задать margin с помощью одного, двух, трёх или четырёх значений. В зависимости от этого, отступ появится для всех или только для указанных сторон:

  • Если указать одно значение (например, margin: 1px;), отступ в 1 пиксель появится со всех сторон;
  • Если указать два (margin: 5% auto;), первое значение применится для верхнего и нижнего отступа, а второе для левого и правого;
  • При трёх значениях (margin: 1em auto 2em;) первое делает отступ сверху, второе — слева и справа, третье — снизу;
  • Если указать четыре значения (margin: 2px 1em 0 auto;), они применятся по часовой стрелке для каждой из сторон: сверху, справа, снизу и слева.

Размер отступа margin можно задать в такими значениями:

Число с единицами измерения — фиксированный отступ в пикселях px или других единицах.

Проценты — отступ в процентах % от ширины блока.

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

Подсказки.

💡 Свойство margin создаёт пространство вокруг элемента, в то время, как padding добавляет пространство внутри элемента.

💡 Верхний и нижний отступы не работают для элементов <span>, <code> и других строчных элементов. Выход в данной ситуации — сделать строчные элементы строчно-блочными (inline-block) или блочными (block).

💡 margin задаёт расстояние от края элемента до родительского элемента, а если такого нет, то до края окна браузера. По умолчанию браузерное окно имеет свои отступы внутри; чтобы от них избавиться, добавь в <body> значение margin: 0.

⚠️ **GitHub.com Fallback** ⚠️