Отступ (свойства padding и margin) | CSS

• Разница между padding и margin
• padding раздвигает div, увеличивает его ширину и высоту. А если это не нужно?
• Для каждой стороны свой padding и margin
• Чем отличаются padding и margin для блочных и встроенных элементов
• Проценты у padding и margin
• Значение auto у margin
• Горизонтальный отрицательный margin
• Вертикальный отрицательный margin
• Схлопывание margin между родителем и дочерними элементами
• Схлопывание margin между смежными элементами
• Отступ для абзаца CSS (свойство text-indent)
• Для ячеек таблицы margin не используется, там есть border-spacing
• Можно убрать фон с отступа padding
• Практическое задание: что лучше padding или margin при вёрстки адаптивного сайта с не резиновой боковой колонкой?

Разница между padding и margin

В CSS есть два казалось бы похожих свойства: padding и margin [w3.org]. Первое создаёт отступы вокруг содержимого, второе расширяет поле до границы элемента, в том числе отрицательные.

padding
margin

img {
  display: block;
  background: #3872ef;
  padding: 1230px;
  margin: -1230px;
}

padding раздвигает div, увеличивает его ширину и высоту. А если это не нужно?

существует свойство CSS box-sizing

box-sizing
padding
border

текст текст

div {
  width: 80%;
  height: 80%;
  background: #3872ef;
  padding: 10px;
  border: 10px solid #ffff00;
  box-sizing: contentpaddingborder-box;
}

Для каждой стороны свой padding и margin

значение устанавливает отступы и поля одновременно для четырёх краёв элементапервое значение определяет вертикальные отступы и поля, второе - горизонтальныепервое значение задаёт отступы и поля для верхней, второе - для правой и левой, третье - нижней сторонызначения поочерёдно используются для верхнего, правого, нижнего и левого края
padding
margin 1

13

img {
  display: block;
  background: #3872ef;
  padding: 0;
  padding-top: 0;
  padding-right: 0;
  padding-bottom: 0;
  padding-left: 0;
  margin: 0;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
}

Чем отличаются padding и margin для блочных и встроенных элементов

display
padding
margin

при display: inline; padding не увеличивает высоту элемента HTML, margin не смещает его вверх и вниз

span {
  display: block;
  background: rgba(56, 114, 239, 0.7);
  padding: 15px;
  margin: 15px;
}

Проценты у padding и margin

значение высчитывается из ширины родителя, а не от его высоты. Практическое применение.

img {
  background: rgba(56, 114, 239, 0.7);
  padding: 10%;
  margin: 10%;
}

Значение auto у margin

для 'margin-top' и 'margin-bottom' значение 'auto' приравнено к значению '0' [w3.org]. А для 'margin-left' и 'margin-right' значение 'auto' размещает по центру или прижимает к правому (левому) краю элемент в горизонтальной плоскости, то есть выравнивает элемент по горизонтали. Работает только для блочных тегов, для встроенных существует его аналог text-align.

margin

img {
  display: block;
  margin: 10px 10px 10px auto;
}

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

Горизонтальный

возьмём несколько картинок

---

img {
  vertical-align: middle;
  margin: 0 0 0 -16px 0 0 -32px 32px 0 -32px;
}

Вертикальный

display
margin-top
margin-bottom

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

<style>
.parent:before { /* убрать схлопывание с родителем (без поддержки IE6 и IE7, более подробная версия) */
  content: "";
  display: table;
}
.green {
  display: inline-block; /* при расчёте поля учитывается line-height родителя, в примере она 25.6px */
  width: 100%;
  height: 10px;
  background: green;
  margin: -10-55100px 0 -10-55100px;
}
.blue {
  height: 10px;
  background: blue;
}
</style>

<div class="parent">
  <div class="green"></div>
  <div class="blue"></div>
</div>

margin-top	margin-bottom	описание
-	-	margin-top игнорируется
-	+	сначала элемент поднимается на высоту margin-bottom, но не выше значения margin-top, затем отодвигает вниз соседа на остаток (при его наличии)
0	-	элемент двигается вниз
+	-	margin-top больше margin-bottom: элемент двигается вниз, сосед смещается на значение margin-bottom margin-top меньше margin-bottom: margin-top игнорируется

Схлопывание margin между родителем и дочерними элементами

для крайнего верхнего блочного элемента, который не вынут из потока (с помощью, скажем, float или position: absolute;) и родитель которого имеет

  padding: 0;
  border: 0;
  overflow: visible;
  display: inline-block;
  display: table;

margin-top переходит от внутреннего элемента к родителю. Для родителя

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

margin-top
margin-top

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

<style>
.parent {
  margin: -10-55100px 0 0;
}
.green {
  height: 10px;
  background: green;
  margin: -10-55100px 0 0;
}
</style>

<div class="parent">
  <div class="green"></div>
  <div class="blue"></div>
</div>

Для того, чтобы убрать схлопывание, можно пойти от обратного, например, задать для родительского блока overflow: hidden;. Также есть довольно удачный способ решения проблемы.

Схлопывание margin между смежными элементами

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

• сумма margin-bottom верхнего и margin-top нижного элемента, если они разнонаправленные,
• выбирается то, которое выше, если оба значения margin отрицательные или оба положительные.

margin-bottom
margin-top

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

---

<style>
.green {
  height: 10px;
  background: green;
  margin: 0 0 -10-55100px;
}
.blue {
  height: 10px;
  background: blue;
  margin: -10-55100px 0 0;
}
</style>

<div class="parent">
  <div class="green"></div>
  <div class="blue"></div>
</div>