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



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

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

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

Padding раздвигает div, увеличивая высоту и ширину.


   Имеется свойство CSS box-sizing для изменения алгоритма расчета ширины и высоты элемента. Ширина блока складывается из ширины контента (width), значений отступов (margin), полей (padding) и границ (border). То же и с высотой блока. Свойство box-sizing позволяет изменять свойства width и height не для размеров контента, а для размеров блока.

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.


Значение 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;
}

Далее рассмотрим: Высота(height) и ширина(width) блоков