С помощью CSS можно устанавливать поля и отступи. Поле-это внешний отступ элемента. Рассмотрим сначала css-свойства для установки полей (внешних отступов):

margin-left - внешний отступ слева
margin-right-внешний отступ справа
margin-top-внешний отступ сверху
margin-bottom-внешний отступ снизу

В свойствах mаrgin можно указывать значения в пикселях или процентах. Для чего нужны эти внешние отступы?
Представьте себе, что вам нужно расположить все содержимое страницы с небольшим отступом от левого края окна браузера. Этого можно легко добиться, воспользовавшись свойством margin-left.

Вот пример:

body{
  margin-left: 30px
}

В этом примере для всего содержимого страницы установлен внешний отступ слева на 30 пикселов.
Теперь рассмотрим css-свойства для установки внутренних отступов:

padding-left – внутренний отступ слева;
padding-right – внутренний отступ справа;
padding-top – внутренний отступ сверху;
padding-bottom – внутренний отступ снизу

В свойствах padding так же как и в свойствах margin можно указывать значения в пикселах или процентах. Для чего нужны внутренние отступы?

Представьте себе, что Вы залили фон абзаца каким-либо цветом, отличным от фонового цвета всей страницы. Вы видите, как текст сильно прилипает к левому краю (туда, где начинается установленный фоновый цвет абзаца). А Вам нужно чтобы был небольшой отступ от левого края. Этого можно легко добиться, воспользовавшись css-свойством padding-left.

Вот пример:

p{
color:#fff;
padding-left: 7px;
background-color:#000;
}

В данном примере для абзаца установлен черный фоновый цвет, цвет текста - белый, внутренний отступ слева – 7 пикселов.