Не получается разобраться с отступами 9/18 91%

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

Подскажите пожалуйста , что не так

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;
}
.block1 {
background:#1abc9c;
padding: 5px 20px;
color: white;
width: 200px;
}
h2 {
display: block;
font-weight: normal;
margin: 10;
padding: 0;

}

.block5 {
display: inline-block;
width: 30px;
height: 30px;
margin: 25px 5px 15px 0;
}

.block2 {
background: #16a085 url("/assets/course14/social-challenge.png")
}

.block3 {
background: #16a085 url("/assets/course14/social-challenge.png") 60px 0px ;

}

.block4 {
background: #16a085 url("/assets/course14/social-challenge.png") 30px 0px;
}

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

image.png1280×1024 213 KB

2

px не дописали. h2 - это блочный элемент по умолчанию.
Задавайте классам осмысленные подходящие названия, чтобы не было такой ситуации:

3

Спасибо, огромное, почти всё сошлось , кроме нижней границы, там напрашивается отступ не кратный 5

image.png1280×1024 209 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;
}
.block1 {
background:#1abc9c;
padding: 5px 20px;
color: white;
width: 200px;
}
h2 {
font-weight: normal;
margin: 15px 0px 20px 0px;
padding: 0;
font-size: 20px;
}

.block5 {
display: inline-block;
width: 30px;
height: 30px;
margin: 25px 5px 10px 0px;
}

.block2 {
background: #16a085 url("/assets/course14/social-challenge.png")
}

.block3 {
background: #16a085 url("/assets/course14/social-challenge.png") 60px 0px ;

}

.block4 {
background: #16a085 url("/assets/course14/social-challenge.png") 30px 0px;
}

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

4

Выровняйте ссылки по вертикали по верху или по низу.

5

Всё получилось, спасибо!!!
Только вот никак не пойму почему нужно было применить выравнивание?
Ссылки же располагались правильно

6

Это как правило. Если у вас в верстке есть блочно-строчные элементы, то их обязательно нужно выравнивать по вертикали, чтобы не было сюрпризов.