Кратко
СкопированоЗадаёт размер внешнего отступа вокруг элемента. Иногда внешние отступы называют полями.
Чтобы сделать отступ только с одной стороны, используй margin (сверху), margin (справа), margin (снизу) или margin (слева).
Или более современные margin, margin, margin и margin.
Примеры
СкопированоПрименяется ко всем четырём сторонам:
.selector { margin: 1em; margin: -3px;}
.selector {
margin: 1em;
margin: -3px;
}
Сверху и снизу | слева и справа:
.selector { margin: 5% auto;}
.selector {
margin: 5% auto;
}
Сверху | слева и справа | снизу:
.selector { margin: 1em auto 2em;}
.selector {
margin: 1em auto 2em;
}
Сверху | справа | снизу | слева:
.selector { margin: 2px 1em 0 auto;}
.selector {
margin: 2px 1em 0 auto;
}
Как понять
СкопированоЗначение margin может выражаться в пикселях (px), процентах (%) или словом auto, а также в любых других доступных в вебе единицах измерения.
Отрицательное значение margin тоже возможно: вместо отступа, оно, наоборот, ставит элемент ближе к соседнему.
Можно задать margin с помощью одного, двух, трёх или четырёх значений. В зависимости от этого, отступ появится для всех или только для указанных сторон:
- Если указать одно значение (например,
margin), отступ в 1 пиксель появится со всех сторон;: 1px; - Если указать два (
margin), первое значение применится для верхнего и нижнего отступа, а второе для левого и правого;: 5 % auto; - При трёх значениях (
margin) первое делает отступ сверху, второе — слева и справа, третье — снизу;: 1em auto 2em; - Если указать четыре значения (
margin), они применятся по часовой стрелке для каждой из сторон: сверху, справа, снизу и слева.: 2px 1em 0 auto;
Как пишется
СкопированоРазмер отступа margin можно задать в такими значениями:
Число с единицами измерения — фиксированный отступ в пикселях px или других единицах.
Проценты — отступ в процентах % от ширины блока.
auto — браузер сам выбирает подходящий размер отступа. Например, можно использовать в некоторых случаях, чтобы центровать элемент.
Подсказки
Скопировано💡 Свойство margin создаёт пространство вокруг элемента, в то время, как padding добавляет пространство внутри элемента.
💡 Верхний и нижний отступы не работают для элементов <span>, <code> и других строчных элементов. Выход в данной ситуации — сделать строчные элементы строчно-блочными (inline) или блочными (block).
💡 margin задаёт расстояние от края элемента до родительского элемента, а если такого нет, то до края окна браузера. По умолчанию браузерное окно имеет свои отступы внутри; чтобы от них избавиться, добавь в <body> значение margin.
На практике
Скопированосоветует
Скопировано🛠 margin тот ещё непредсказуемый чёрт. Слева и справа работает адекватно, даже в строчных элементах. Но стоит сделать margin — так будь готов к сюрпризам. К примеру, все строчные элементы, то есть display, вообще не учтут твой отступ сверху и снизу. Блочные тоже могут сработать, а могут и нет: в зависимости от родителя. Единственное, где в margin и margin можно быть уверенным — это в элементах с position и position — уж там margin точно не сможет тебя обмануть.
советует
Скопировано🛠 Чтобы упростить работу, лучше всего использовать и padding (для внутренних отступов внутри блока), и margin для внешних отступов элемента внутри блока. Например, если у вас указаны корректные padding-отступы, то вам не придётся использовать margin для отступа от верхнего края для первого элемента.
После того как вы задали внутренние отступы, всегда используйте один и тот же margin для вертикальных отступов. Отступ сверху из-за установленных внутренних padding-отступов у блока вам больше не нужен, поэтому пользуйтесь margin для отступов между элементами. Вы же пишете сверху вниз, правда? Тогда вам всегда будет понятно, почему тот или иной элемент находятся не там, где вам хочется.
Конечно, никто не запрещает использовать и популярное: margin для центрирования элемента по строке.
советует
Скопировано🛠 Очень частый приём, который используется в вёрстке — выравнивание блочного элемента по центру родителя при помощи margin.
Предположим, есть основная колонка контента, которая должна находится по центру окна браузера. Для этого потребуется ограничить ширину колонки. Например, задать width. Зачем? Потому что все блочные элементы по умолчанию имеют ширину 100%. Если не будет свободного места, то отцентрировать элемент не получится.
Теперь, когда у элемента появилось свободное место, можно применить к нему свойство margin. За счёт ключевого слова auto по бокам элемента будут равные внешние отступы, выравнивающие элемент по центру. В данном случае слева и справа отступ будет равен (100% - 80%) / 2 = 10%. Получается, размер, оставшийся после вычитания ширины элемента из 100%, делится на 2.
Причём боковые отступы будут гибкими. Если задать ширину элемента в пикселях, а затем выровнять при помощи margin — боковые отступы будут тянуться в зависимости от ширины окна браузера.
🛠 Начинающие разработчики часто злоупотребляют отрицательными отступами. Это очень плохая практика.
Представь, что ты делаешь перестановку в доме и решаешь поставить обеденный стол на 20 сантиметров над полом и на пол метра в стену. На сколько это будет логично и удобно?
Аналогично с элементами и отрицательными отступами. Если написан отрицательный отступ, то в 98% случаев это повод поискать ошибку в своей разметке или стилях.
Отрицательный отступ обоснован только если нужно разместить один элемент чуть-чуть поверх другого. В этом случае да, самый простой способ реализовать наложение — такой тип отступа. В другим случаях это просто поломка естественного потока документа 🤙🏼
Читайте также
-
Блочная модель
Браузеры рисуют любой элемент на HTML-странице как прямоугольник. Как рассчитывается размер этого прямоугольника? Разберёмся с одной из основных концепций вёрстки.