css отступы на примерах

По умолчанию, каждый элемент имеет свои отступы, при том в каждом из браузеров они могут немного отличаться. Это сделано специально чтобы когда добавляется что-то на страницу которая не имеет какого-то стиля все выглядело не слипишимся.

Для того чтобы это убрать существуют reset.css или же normalize.css ими желательно пользоваться, они убирают отступы которые не нужны и оставляют те что нужны. К примеру у body есть свой отступ который равняется кажись 20px он в целом никому не нужен, кроме редких случаев. Так же есть отступы margin у таких елементов как h1, p - часто грамотный дизайнер знает какой отступ у этих елементов и рисует исходя из этого.. тем самым Вам не нужно ставть отступ каждому елементу уникальный

Но... это не точно =)

По порядку:

1. Именно так. div занимает всю ширину body. Именно это вы и видите. Отступы напрямую связаны со вторым вопросом.
2. margin по тому что это внешний отступ от тега html.
3. По тому что у тега p есть margin, однако по умолчанию div имеет overflow: visible, что позволяет margin тега p выходит за пределы div, так как нет границ которые будут его ограничивать, исправить это можно либо ответом из 4 вопроса (НЕ рекомендуется), либо добавлением overflow: auto или overflow: hidden в зависимости от того что вы желаете получить.
4. padding-top и padding-left не отличаются, они оба все еще равны 10, но у Вас все еще есть margin. Что касается того, почему пропал отступ сверху. По тому что padding > 1 unit (любые единицы измерения), немного изменит поведение overflow: visible. Если раньше margin, тега p ничего не ограничивало, то теперь есть padding у родительского div. По этому теперь стили перерисовываются с этим условием.

В спецификации HTML и CSS есть много неоговоренных вещей, которые разработчики делают как посчитают нужным. К примеру, вы практически нигде не встретите конкретное значение отступов и есть ли они вообще у элементов. В первую очередь стоит помнить, что HTML является гипертекстом и делался для нужд передачи документов.

1. Вы наверное замечали, что всякие официальные документы имеют отступы от краев, в том же Word или при выводе на печать? Это делается для удобства чтения, текст на краю выглядит очень плохо. Поэтому делают отступ от краев документа.

2. Margin - это в первую очередь отступ от края элемента до него самого. А padding от границы до контента, поэтому не забывайте про границы border(!). Поэтому логично, что данный отступ оформлен через margin, поскольку это правило пришло из оформления документов.

Заметьте, этот отступ дает браузер как "user agent stylesheet" и разные браузеры могут давать разные отступы, размеры и прочее, что явно не указано в документации.

3. Это эффект схлопывания границ. Если у внутреннего элемента margin больше, чем у внешнего, то они оба отодвигаются от верхней границы на величину внутреннего элемента. У p от 16 и потому общий margin становится равен 16 т.к. 16 > 8 и берется больший. Причем тема схлопывания довольно специфицная, к примеру при добавлении текста, границ, отступов схлопывание пропадает.

Посмотрите тут часть про "вложенные элементы", да и вообще всю статью: http://htmlbook.ru/samlayout/blochnaya-verstka/skhlopyvayushchiesya-otstupy

4. Опять же исходя из пункта 3 и эффекта схлопывания пропадает. Ну и еще есть отступы у самого <p>, хотя их конкретное значения в пикселях явно в документации не указано, но вы видите разницу.

откудого появляются отступы от краев?

У body по умолчанию margin: 8px.

Но почему margin, а не padding?

Потому что так принято. Если ты ему position: relative пропишешь, то absolute с нулём встанет по этому отступу, а по паддингу бы не встал:

body { 
  position: relative; 
  margin: 1em; 
  padding: 1em; 
  outline: 1px dotted red; 
} 
 
div { 
  position: absolute; 
  left: 0; 
  top: 0; 
  width: 1em; 
  height: 1em; 
  background: silver; 
}

<div></div> 
123456<br> 
7890123

body - единственный элемент

Нет, есть ещё head:

head, style { display: block; }

<h1>Заголовок</h1>

Почему добавляется отступ сверху div-а, при добавлении в него

Это называется margin collapse (схлопывание марджинов). Предлагаю почитать отдельно.

Почему пропал отступ (который появился в 3-ем пункте)

Тоже margin collapse, только на этот раз отступы не схлопываются.

почему padding top и left отличаются?

Они не отличаются, ты просто забыл про margin: 1em 0 по умолчанию у p.

PS: Что делать, если не работает CSS-класс?