padding – внутренний отступ, margin – внешний отступ.
У нас имеется элемент, ограниченный рамкой. В качестве примера, возьмем тот же заголовок h1.
Между содержимым и краем рамки – внутреннее поле, ширина которого задается через свойство padding,
а ширина внешнего поля – между дочерним элементом и родительским задается с помощью margin.
Схема, которая поможет вам понять отличия margin и padding:
Теперь конкретный пример:
/*
Блок div в примере является родительским для h1. Для наглядного представления мы создадим рамки (смотри border css) вокруг каждого элемента. На примере вы узнаете, как сделать отступ от конкретной стороны (в примере – расстояние от левого края), а также, как задать автоматический размер отступа, с помощью которого можно расположить элемент по центру (значение auto).
Сокращенная запись padding:
Сокращенная запись margin:
Как для padding, так и для margin значения полей указываются в последовательности, начиная от верхнего поля и далее по часовой стрелке: правое, нижнее, левое.
margin может принимать отрицательные значения. Тогда дочерний блок будет выходить за пределы родительского элемента:
Это, так называемое, отрицательное поле.
