9/18 93% проблемы с отступами

Курсы §14. Мастерская: декоративные элементы
1

Помогите разобраться с отступами.
Не могу понять принцип.

Снимок экрана 2017-04-14 в 17.20.47.png1440×900 250 KB

html,
body {
margin: 0;
padding: 0;
}

body {
width: 280px;
min-height: 280px;
padding-top: 20px;
padding-left: 20px;
font-size: 14px;
font-family: “Arial”, sans-serif;
line-height: 1.2;
background: #ecf0f1;
}
h1 {
font-size: 20px;
font-family: “Arial”, sans-serif;
font-weight: normal;
margin-top: 5px;
padding-bottom: 5px;
}
.main-menu {
background-color: #1abc9c;
width: 200px;
height: 205px;
color: white;
padding: 15px 20px;
}
.social {
display: inline-block;
width: 30px;
height: 30px;
vertical-align: middle;
background-color: #16a085;
margin-right: 5px;
margin-top: 10px;
background-image: url("/assets/course14/social-challenge.png");
background-repeat: no-repeat;
}

.social-fb {
background-position: 0 0;
}
.social-tw {
background-position: -30px 0;
}
.social-google {
background-position: -60px 0px;
}

/*
Все размеры, отступы, координаты, размеры шрифтов (не заданные в body) кратны 5 или 10.
Адрес картинки-спрайта:
/assets/course14/social-challenge.png
*/

2

принцип простой: для многих элементов (p, h, списки и элементы списков и т.д.) в браузере есть стили (в т.ч. отступы) по умолчанию - чтобы даже если вы не прописали никаких стилей, для пользователя заголовок все равно выглядел как заголовок и был отделен от основного текста.
если вас размеры этих отступов не устраивают, то их нужно переопределить - т.е. все отступы прописать в CSS.
вот вы указали для заголовка маргин сверху 5рх, а про остальные маргины - справа, слева и снизу - промолчали. И браузер вместо вас на место этих неупомянутых маргинов подставил свои значения.
Для абзаца вы стили вообще не прописывали - и браузер сделал отступы за вас.

и разберитесь с <br> - не нужны они там, совсем не нужны.

3

Thank you!