Очень легкий урок, но так же он очень важный. Сейчас мы разберемся в отличиях margin от padding. Давайте для этого вспомним блоковую модель CSS.

MARGIN (Поля) – это расстояние от границы (рамки) блока, до ближайших элементов, если же такой отсутствует, то до краев документа.

PADDING (Отступы) - внутреннее расстояние, между границей (рамкой) и содержимым блока.

Сразу же в примере сделаем три стиля из трех различных параграфов, с разными значениями margin и padding и глянем на результат:

.p1 {
background-color : #FFFFFF;
border:3px solid black;
margin:30px;
}
.p2 {
background-color : # FFFFFF;
border:3px solid black;
padding:30px;

}
.p3 {
background-color : # FFFFFF;
border:7px solid black;
margin:70px;
padding:40px;
}

Теперь все ясно? Думаю, здесь разобрались.

Теперь добавим знакомые нам ключевые слова: top, right, bottom, left и можно регулировать отступы и поля соответственно сверху, справа, снизу, слева.

p {
margin-top:30px;
margin-left:30px;
margin-bottom:30px;
margin-right:90px;
}

Тот же пример, только в сокращенной запии:

p {
margin:30px;
margin-right:90px;
}

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

Можно еще запись сделать такой:

p {
margin: 30px 30px 30px 90px;
}

Все значения пишутся по часовой стрелке: верхнее, правое, нижнее, левое.

Давайте разберемся, когда лучше использовать поля, а когда отступ?

Это будете решать вы, но я могу вам дать парочку отличий:

  • Отступы (padding) всегда будут располагаться внутри блока, а поля (margin) – за их пределами;
  • Фон блока и фоновое изображение распространяются только на отступы, но не на поля. Поля всегда будут прозрачными, и сквозь них просвечивает фон родительского элемента.

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