Содержание

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; }
Начальное значениекак и у каждого из подсвойств этого свойства:
Применяется квсе элементы, кроме элементов с табличным типом
display
, отличным от table-caption, table и inline-table. Это также применяется к ::first-letter и ::first-line.
Наследуетсянет
Процентыссылается на ширину содержащего блока
Обработка значениякак и у каждого из подсвойств этого свойства:
  • margin-bottom: процент, как указан, или аблосютная длина
  • margin-left: процент, как указан, или аблосютная длина
  • margin-right: процент, как указан, или аблосютная длина
  • margin-top: процент, как указан, или аблосютная длина
Animation typeдлина

Синтаксис

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

<length>, <percentage> или является ключевым словом auto. Каждое значение может быть положительным, отрицательным или равным нулю.

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

Значения

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 */
                            /* блок отцентрирован горизонтально */

Примечание

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

Чтобы центрировать что-то горизонтально в современных браузерах, вы можете использовать display: flex; justify-content: center; .

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

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

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

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

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

Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом https://github.com/mdn/browser-compat-data. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам соответствующий запрос. Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidFirefox для AndroidOpera для AndroidSafari on iOSSamsung Internet
marginChrome Полная поддержка 1Edge Полная поддержка
12
Firefox Полная поддержка 1IE Полная поддержка 3Opera Полная поддержка 3.5Safari Полная поддержка 1WebView Android Полная поддержка 1Chrome Android Полная поддержка 18Firefox Android Полная поддержка 4Opera Android Полная поддержка 10.1Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0
autoChrome Полная поддержка 1Edge Полная поддержка 12
Полная поддержка 12
Замечания The auto value is not supported in quirks mode.
Firefox Полная поддержка 1IE Полная поддержка 6
Полная поддержка 6
Замечания The auto value is not supported in quirks mode.
Opera Полная поддержка 3.5Safari Полная поддержка 1WebView Android Полная поддержка 37Chrome Android
Полная поддержка
18
Firefox Android Полная поддержка 4Opera Android Полная поддержка 14Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка 1.0

Легенда

Полная поддержка  
Полная поддержка
Смотрите замечания реализации.
Смотрите замечания реализации.

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

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

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

12.0+ 6.0+ 1.0+ 1.0+ 3.5+ 1.0+

Описание

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

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

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

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

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

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

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

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

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

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

Примечание: допускаются отрицательные значения полей.

Значение по умолчанию: 0
Применяется: ко всем элементам, за исключением тех элементов, которые относятся к типу display: table-*, кроме table-caption, table и inline-table. Дополнительно: значения относящиеся к margin-top и margin-bottom не применяются к строчным элементам.
Анимируется: да
Наследуется: нет
Версия: CSS1
Синтаксис JavaScript: object.style.margin=»10px 5px»

Синтаксис

margin: величина|auto|inherit;

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

Значение Описание
auto для вертикальных отступов вычисляется как 0. При использовании для горизонтальных отступов следует учитывать следующие моменты:
  • данное значение применяется только к блочным элементам, которые имеют фиксированную ширину
  • при использовании значения auto, элемент сдвигается полностью влево или вправо, если значение одновременно установлено для отступа слева и справа, элемент будет центрирован по горизонтали.
величина Указывает размер поля в единицах измерения, используемых в CSS.
% Величина, указанная в процентах, вычисляется в зависимости от ширины области содержимого родительского элемента.
inherit Указывает, что значение наследуется от родительского элемента.

Пример

div#myBox {
background-color: red;
margin: auto;
}

Поговорим о margin, он же маргин( часть 1-я ) / Хабр

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

Начинающим верстальщикам она точно будет полезна, а вот профессионалам — сомневаюсь, так как человек занимающийся не первый год версткой уже обязан «вызубрить» наизусть все особенности данного свойства.

В этой части статьи я напишу о вертикальном маргине. О горизонтальном поговорим в следующей части.

Для начала, разберем вкратце, какие есть единицы измерения, что они означают и какие использовать для отступов маргин.

Cm, mm, inch, pc, pt – абсолютные единицы измерения. Рекомендуется использовать при печати документов.

Px, em, ex, % — относительные единицы, используются для мониторов.

Для маргина, я использую px и %, а em – для указания размеров шрифта. Ex( в IE ex = em / 2 ) – использовать не рекомендую, т.к в каждом броузере интерпретируется по-разному.

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

Область просмотра – то, на чем пользователь видит содержимое сайта, не прокручивая при этом экран. У каждого пользователя она разная.

Каждый верстальщик знает, что любой элемент можно представить в виде 4 областей( маргин, бордер, паддинг и контент ).

Маргин – внешний отступ. По вертикали и горизонтали построение маргин разные.

Как я уже писал выше, размеры для маргина могут проставляться в em, ex, px – жесткое задавание и в % — считаются относительно какой-то области.

Приведу пример одной из частых допускаемых ошибок начинающих верстальщиков.

Есть 2 дива: first и внем див second.

#first{
padding: 100px;
background: #b5bcbc;
}
#second{
height: 100px;
background: #b06b48;
margin: 30% 0 0;
}

Прошу обратить внимание что свойство width я не задал ни одному диву(об этом поговорим позже). Сейчас нас интересует только маргин, который равен margin: 30% 0 0;

Я надеюсь, что все знают, как считается маргин в данном случае, на всякий случай напомню, что считается по часовой стрелке, тоесть: сверху отступ будет 30%, справа — 0, снизу — 0 и слева, — так как я ничего не указал, то маргин принимает значение противоположной стороны, тоесть в данном случает, если маргин справа равен 0, то маргин слева, если не указан, тоже равен 0.

Но сейчас нас интересует маргин, который равен 30%, он же отступ сверху. Откуда же берутся эти 30%?

Многие считают и считают неверно, что 30% берутся от верхней части всей страницы.

Но это неверно!

Так как в данном случае, див second вложен в див first, то margin-top:30% будет считаться относительно ширины родительского дива second, тоесть относительно ширины дива first!

В данном случае ширина дива first по умолчанию авто, поэтому див принимает все свободное пространство по ширине, а из этой ширины будут высчитываться 30% маргин-топ для дива second.

При уменьшении родительского дива, будет и уменьшаться отступ сверху у дива second.

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

Например: два дива, лежащие один под другим.


если мы добавим первому диву margin-bottom: -100px, а второму margin-top: -50px
#first{
height: 200px;
background: #69c;
margin: 0 0 -100px;
}
#second{
height: 200px;
background: #f60;
margin: -50px 100px 0;
}

то произойдет следующее.

Но… тут и наступает большая ошибка новичков.

Многие думают, что так как верхний див имеет маргин-боттом -100px, а нижний див, маргин-топ -50px, то нижний див «заедет» на верхний на -150px.

Ошибка!

Если маргины одноименные( оба маргина или отрицательное или положительное число ), то в таком случае берется большое число по модулю, а меньшее не учитывается.

В данном случае нижний див «заедет» на верхний див на 100px, а 50px учитываться не будут.

Тоже самое верно и для положительных маргинов, нижний див «уедет» от верхнего на 100px, а 50px учитываться не будут.

Рассмотрим следующий пример.
Есть 2 дива, один под другим.

#first{
height: 200px;
background: #69c;
margin: 0 0 -100px;
}
#second{
height: 200px;
background: #f60;
margin: 50px 100px 0;
}

first
second

Как видите маргин-боттом первого — отрицательный, а маргин-топ второго — положительный, что произойдет в данной ситуации?

Для разноименных маргинов произойдет сложение, тоесть: -100 + 50 = -50. Соответственно нижний див поднимиться на 50px вверх.

Едем далее.

Два дива, один вложен в другой.

#first{
background: #b5bcbc;
}
#second{
height: 200px;
background: #b06b48;
}

Если в цсс добавить внутреннему диву маргин-топ 200px,
#second{
height: 200px;
background: #b06b48;
margin-top: 200px;
}

То, вот тут то и очередная ошибка! Некоторые считают, что внутренний маргин, должен «отодвинуться» от своего родителя на 200px вниз а его родитель останется на месте, и тем самым растянется.

Но, как бы не так!

Если у родительского эл-та нет ограничивающих факторов ( об этих факторах напишу чуть ниже ), то маргин переходит от внутреннего элемента к внешнему. Потом по старой схеме выбирается маргин: если они одноименные, то выбирается больший, если разноименные, то происходит сложение.
И результат

Но, как быть, если нам это не нужно и мы хотим, чтобы див-родитель остался на своем месте, а див-ребенок отодвинулся на 200px вниз?

Можно отменить это действие по отношению к родителю, есть несколько способов.
1. задавание padding родительскому блоку
2. задавание border родительскому блоку
3. задавание overflow родительскому блоку, любое значение кроме visible( работает везде, кроме старых ИЕ )
И вуаля

Спасибо за внимание, надеюсь мне удалось прояснить новичкам, что такое маргин и как правильно и откуда его считать.
Если статья оказалась полезна и есть желание читать продолжение, то в следующей части я опишу о горизонтальных маргинах. Там дела обстоят не так просто, как кажется на первый взгляд 😉

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

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"

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

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

Версия CSS

CSS1

Наследуется

Нет.

Анимируемое

Да.

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

<!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>
Пример использования отступов элемента. CSS свойства

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

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

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

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

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

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


margin(ы) задаются от предыдущего элемента к следующему, от первого ко второму, сверху вниз, слева направо.

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

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

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


margin(ы) задаюся только между соседними элементами дом дерева.

В примере 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>

Если взять пример с заголовком, и нужно сделать отступ для заголовка сверху. то последний элементом будет section и для него задается padding-top, margin(ы) которые стоят по дефолту всегда нужно обнулять.

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

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

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


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

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

  • Наследование через элемент (если вытащить этот блок с элемента, отступа не будет, и его можно будет просто разместить в другом месте).
  • Добавление класса (можно сделать блок элементом).
  • Обертка (как блок, у которого роль, только в позиционировании).
.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 | Учебные курсы

Свойство margin устанавливает пустое пространство от внешнего края border, padding или содержимого блока (рис. 1). Под margin нет своего фона и он принимает фон родительского элемента.

margin

Рис. 1. margin

margin в основном используется для создания вертикальных и горизонтальных отступов между элементами. Аналогично другим блочным свойствам есть свойства для каждой стороны — margin-top, margin-right, margin-bottom и margin-left, соответственно устанавливающие отступ сверху, справа, снизу и слева. В примере 1 пространство между двумя вертикальными блоками задаётся с помощью свойства margin-bottom.

Пример 1. Расстояние между блоков

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>margin</title> <style> .block { background: #B08874; /* Цвет фона */ color: #fff; /* Цвет текста */ padding: 1rem; /* Поля вокруг содержимого */ margin-bottom: 1rem; /* Расстояние снизу */ } </style> </head> <body> <div>Первый блок</div> <div>Второй блок</div> </body> </html>

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

Расстояние между блоков

Рис. 2. Расстояние между блоков

Значения margin

В качестве значений margin используются любые допустимые единицы длины, к примеру, пиксели, проценты, em, rem и др. В отличие от padding свойство margin может быть отрицательным (например: -10px), а также принимать значение auto. В остальном margin похоже на padding, у него также может быть от одного до четырёх значений.

Одно значение — определяет отступы для всех сторон блока.

margin: все стороны;
margin: 10px;

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

margin: верх-низ лево-право;
margin: 10px 20px;

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

margin: верх лево-право низ;
margin: 10px 20px 5px;

Четыре значения — первое определяет отступ сверху, второе справа, третье снизу, четвёртое слева. Для запоминания последовательности можно представить часы — значения идут по часовой стрелке, начиная с 12 часов.

margin: верх право низ лево;
margin: 5px 10px 15px 20px;

Значение auto

Свойство margin позволяет выравнивать элемент по центру горизонтали, если использовать значение auto и задать ширину элемента через width (пример 1).

Пример 2. Значение auto

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>margin</title> <style> .dialog { width: 80%; /* Ширина блока */ background: #D4E3A5; /* Цвет фона */ border: 2px solid #7D9B3D; /* Параметры рамки */ padding: 1rem; /* Поля */ margin: auto; /* Выравниваем по центру */ } </style> </head> <body> <div> Полинезийцы называют Млечный путь Манго-Роа-И-Ата, что в переводе с маори означает «Длинная акула на рассвете». </div> </body> </html>

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

Выравнивание блока по центру

Рис. 3. Выравнивание блока по центру

Вместо margin: auto можно использовать комбинацию margin-left: auto и margin-right: auto.

Выравнивание блока по центру через значение auto работает только в сочетании с width.

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

Пример 3. Значение auto

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>margin</title> <style> .center { display: block; /* Блочный элемент */ margin: auto; /* Выравниваем по центру */ } </style> </head> <body> <img src=»image/html-128.png» alt=»HTML5″> </body> </html>

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

Выравнивание картинки по центру

Рис. 4. Выравнивание картинки по центру

Проценты

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

  • По горизонтали проценты считаются от ширины всего блока.
  • По вертикали проценты считаются от ширины всего блока.

Таким образом, margin в процентах берётся от ширины всего блока, даже для margin-top и margin-botom.

Отрицательный margin

margin может быть задан с отрицательным значением, тем самым элемент сдвигается в противоположном направлении. К примеру, margin-top:-10px поднимает блок вверх на 10 пикселей, а margin-left:-10px сдвигает блок влево.

В примере 4 показан сдвиг блока с классом stat вверх, если он располагается сразу после элемента <p>.

Пример 4. Использование отрицательного значения

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>margin</title> <style> p + .stat { margin-top: -1rem; /* Поднимаем текст вверх */ } .stat { font-size: 3rem; /* Размер текста */ } </style> </head> <body> <p>Продано ёлок</p> <p>64</p> </body> </html>

Результат данного примера показан на рис. 5. Без отрицательного margin строки располагаются далеко друг от друга.

Поднимаем блок вверх через margin-top

Рис. 5. Поднимаем блок вверх через margin-top

Обнуление margin

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

  • для <body> по умолчанию margin задан как 8px;
  • для списков <ul>, <ol>, <dl> margin-top и margin-bottom заданы как 1em;
  • для <blockquote> и <figure> margin-left и margin-right заданы как 40px.

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

Пример 5. Обнуление margin

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>margin</title> <style> body { margin: 0; /* Обнуляем */ } header { background: #D4E3A5; /* Цвет фона */ padding: 1em; /* Поля вокруг текста */ } </style> </head> <body> <header><h2>Кря-кря</h2></header> </body> </html>

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

Обнуление margin у <body>

Рис. 6. Обнуление margin у <body>

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 поля,. HTML

CSS поля.


CSS маржа

 маржа 
: вверху справа внизу слева;

:

  • верх -;
  • справа -;
  • снизу -;
  • слева -;

CSS.


1

:

 
маржа: 7px 7px 7px 7px; : поле: 7px;

2

CSS padding, margin.


поле 4 CSS. -.

  • поле слева -;
  • маржа-право -;
  • margin-top -;
  • поле нижнее -;
 
маржа: 3px 5px 7px 10px; : поле слева: 10 пикселей; поле справа: 5 пикселей; маржинальная вершина: 3 пикселя; поле снизу: 7 пикселей;

CSS поля.HTML.



1.

 
<Голова> <Стиль> .block1 { ширина: 250 пикселей; высота: 250 пикселей; граница: 1px пунктирная # 000; фон: # 228B22; } .margin1 { ширина: 100 пикселей; высота: 100 пикселей; граница: 2px пунктирная # 000; поле: 10px 0px 0px 40px; фон: # 7FFF00; } <Тело>

:


2.

 
<Голова> <Стиль> .block1 { ширина: 250 пикселей; высота: 250 пикселей; граница: 1px пунктирная # 000; фон: # 228B22; } .margin1 { ширина: 100 пикселей; высота: 100 пикселей; граница: 2px пунктирная # 000; поле: -20px 0px 0px 40px; фон: # 7FFF00; } <Тело>

:



Маржа

JavaScript:

 
[окно.] document.getElementById ("elementID"). style.margin = "VALUE"


:
• css border
• css background
• CSS переход
• текстовое оформление
• по вертикали
• пробел
• перенос слов
• z-index

← CSS

,

CSS свойство margin


Пример

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

равным 35 пикселям:

р {
поле: 35px;
}

Попробуй сам »

Ниже приведены примеры «Попробуйте сами».


Определение и использование

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

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

    Маржа
  • : 10px 5px 15px 20px;
    • Верхнее поле составляет 10px
    • правое поле составляет 5px
    • Нижнее поле
    • составляет 15px
    • левый край 20px

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

    Маржа
  • : 10px 5px 15px;
    • Верхнее поле составляет 10px
    • справа и слева поля 5px
    • Нижнее поле
    • составляет 15px

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

    Маржа
  • : 10px 5px;
    • верхний и нижний поля 10px
    • справа и слева поля 5px

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

    Маржа
  • : 10px;
    • все четыре поля 10px

Примечание: допускаются отрицательные значения .

Значение по умолчанию: 0
Наследуется: нет
Анимационный: да, см. Отдельные свойства . Читайте о анимации Попытайся
Версия: CSS1
Синтаксис JavaScript: объект .style.margin = «100px 50px» Попытайся

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

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

Недвижимость
маржа 1,0 6,0 1.0 1,0 3,5


Синтаксис CSS

поле: длина | авто | начальный | наследовать;

Значения недвижимости


Свернуть маржу

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

Этого не происходит на горизонтальных (левых и правых) полях! Только вертикальный (Верх и низ) поля!

Посмотрите на следующий пример:

В приведенном выше примере элемент

имеет верхнее и нижнее поле 30 пикселей.<Р класс = «б»> Элемент имеет верхнее и нижнее поле 20px.

Это означает, что вертикальное поле между

и

должно быть 50px (30px + 20px). Но из-за обвала маржи фактическая маржа заканчивается до 30px!


Дополнительные примеры

Пример

Установите поле для элемента

до 35 пикселей для верха и низа и до 70 пикселей справа и слева:

р {
поле: 35px 70px;
}

Попробуй сам »

Пример

Установите поле для элемента

на 35 пикселей для верха, 70 пикселей справа и слева и до 50 пикселей снизу:

р {
поле: 35px 70px 50px;
}

Попробуй сам »

Пример

Установите поле для элемента

на 35 пикселей для верха, 70 пикселей справа, 50 пикселей снизу и до 90 пикселей слева:

р {
поле: 35px 70px 50px 90px;
}

Попробуй сам »

Связанные страницы

Учебник по CSS: CSS Margin

Учебник по CSS: CSS Box Model

HTML DOM ссылка: свойство margin


,

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

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

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

Верхнее и нижнее поля не влияют на незаменяемых встроенных элементов , таких как или .

Примечание: Поля создают дополнительное пространство вокруг элемента. Напротив, отступ создает дополнительное пространство в пределах элемента.

Синтаксис

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

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

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

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

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

Свойство margin может быть указано с использованием одного, двух, трех или четырех значений.Каждое значение - <длина> , <процент> или ключевое слово auto . Отрицательные значения рисуют элемент ближе к его соседям, чем это было бы по умолчанию.

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

Значения

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

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

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

Примеры

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

HTML
 
Этот элемент центрирован.
Этот элемент расположен вне своего контейнера.
CSS
центр {
наценка: авто;
фон: лайм;
ширина: 66%;
}

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

Дополнительные примеры

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

поле: 10px; / * Все стороны: 10px margin * /

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

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

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

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

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

Примечания

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

Для центрирования чего-либо по горизонтали в современных браузерах вы можете использовать дисплей : flex; justify-content : центр;

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

маржа рушится

Верхние и нижние поля элементов иногда объединяются в одно поле, равное большему из двух полей. Для получения дополнительной информации обратитесь к разделу «Обработка разрыва полей».

Технические характеристики

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

Данные совместимости обновлений на GitHub
Desktop Мобильный
Chrome Край Firefox Internet Explorer Opera Safari Android WebView Chrome для Android Firefox для Android Opera для Android Safari на iOS Samsung Интернет
margin Chrome Полная поддержка 1 Edge Полная поддержка 12 Firefox Полная поддержка 1 IE Полная поддержка 3 Opera Полная поддержка 3.5 Safari Полная поддержка 1 WebView Android Полная поддержка 1 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Opera Android Полная поддержка 10.1 Safari iOS Полная поддержка 1 Samsung Интернет Android Полная поддержка 1.0
авто Chrome Полная поддержка 1 Edge Полная поддержка 12
Полная поддержка 12
Примечания Значение auto не поддерживается в режиме причуд.
Firefox Полная поддержка 1 IE Полная поддержка 6
Полная поддержка 6
Примечания Значение auto не поддерживается в режиме причуд.
Opera Полная поддержка 3.5 Safari Полная поддержка 1 WebView Android Полная поддержка 37 Chrome Android Полная поддержка 18 Firefox Android Полная поддержка 4 Opera Android Полная поддержка 14 Safari iOS Полная поддержка 1 Samsung Интернет Android Полная поддержка 1.0

Легенда

Полная поддержка
Полная поддержка
См. Примечания по реализации.
См. Примечания к реализации.

См. Также

,

W3.CSS Margins


Класс w3-margin добавляет 16px margin ко всем сторонам элемента.


W3.CSS Маржинальные классы

W3.CSS предоставляет следующие классы маржи:

. . . . .
Класс Определяет
w3-margin Добавляет отступ в 16 пикселей ко всем сторонам элемента
w3-margin-top Добавляет верхнее поле 16px к элементу
w3-margin-right Добавляет правое поле размером 16px к элементу
w3-margin-bottom Добавляет нижнее поле размером 16 пикселей к элементу
w3-margin-left Добавляет левое поле размером 16 пикселей к элементу
w3-секция Добавляет верхнее и нижнее поле размером 16px к элементу

Маржа

Класс w3-margin добавляет отступ в 16px ко всем сторонам элемента:

Класс w3-margin добавляет маржу 16px ко всем сторонам элемент.

Пример


У меня есть поле в 16px со всех сторон.

Попробуй сам "

Margin Top

Класс w3-margin-top добавляет верхнее поле в 16px к элементу:

Класс w3-margin-top добавляет 16px top margin к элементу.

Пример


У меня есть поле в 16 пикселей сверху.

Попробуй сам "

Margin Bottom

Класс w3-margin-bottom добавляет 16px нижнее поле к элементу:

Класс w3-margin-bottom добавляет 16px нижнего поля для элемента.

Пример


У меня на полях 16px.

Попробуй сам "

Margin Left

Класс w3-margin-left добавляет 16px левое поле к элементу:

Класс w3-margin-left добавляет 16px оставленного поля к элементу.

Пример


У меня осталось поле в 16px.

Попробуй сам "

Margin Right

Класс w3-margin-right добавляет правое поле размером 16px к элементу:

Класс w3-margin-right добавляет 16px right margin к элементу.

Пример


У меня есть право на 16 пикселей.

Попробуй сам "

Разделы

Многие элементы HTML не имеют верхнего или нижнего поля по умолчанию. Такие элементы будут отображаться без разрыва между ними:

w3-секция может использоваться для разделения элементов.

добавляет 16px верхнее и нижнее поле для любого элемента HTML:

Пример


Я Синий


Я зеленый

Попробуй сам "
,