проблемы с отступами

HTML КОД:
`

Испытание: карточка курса
Курс «Фоны»

Учимся использовать фоновые цвета и изображения, разбираемся с форматами, знакомимся с приёмами создания декоративных эффектов.

' --------------------------------------------------------- CSS КОД: `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;
}
/*
Все размеры, отступы, координаты, размеры шрифтов (не заданные в body) кратны 5 или 10.
Адрес картинки-спрайта:
/assets/course14/social-challenge.png
*/
.content {
display: block;
padding: 20px;
background: #1abc9c;
width: 200px;
color: white;
}
.headline {
display: block;
padding-bottom: 6px;
font-size: 20px;
}
.buttons {
display: block;
padding-top: 11px;
padding-bottom: -19px
}
.social {
display: inline-block;
height: 30px;
width: 30px;
background: #16a085 url("/assets/course14/social-challenge.png") no-repeat;
margin-right: 5px;
}
.social-facebook {
background: #16a085 url("/assets/course14/social-challenge.png") no-repeat 0 0;
}
.social-twitter {
background: #16a085 url("/assets/course14/social-challenge.png") no-repeat -30px 0;
}
.social-google_accounts {
background: #16a085 url("/assets/course14/social-challenge.png") no-repeat -60px 0;
}

Делал-делал, всё норм, даже попадал в размеры кратные 5-ти.
А потом, началось… вроде всё правильно было, но у меня проблема с отступами уже между заголовком(который я зачем-то сделал в контейнере), и между кнопками с абзацем, и краем контейнера( class=“content” ).
Использовал все проверки на последней 96%.
Кончились проверки, я уткнулся мордой в экран, и посчитал сколько еще надо пикселей переделать(экран старый очень удобно пиксели угадывать). Переместил… Но вот только о кратности к 5-ти речь не идёт. Что нужно сделать, чтобы попасть в кратность, и отступы были правильными???

В HTML я поменял абзац на span просто ради того чтоб все отступы задать в ручную.

исправленый CSS
.content {
padding: 20px;
background: #1abc9c;
width: 200px;
color: white;

}
.headline {
font-size: 20px;
}
span{
display:block;
margin:20px 0 15px;
}
.buttons {
margin-top: 25px;
height:30px;

}
.social {
display: inline-block;
height: 30px;
width: 30px;
background: #16a085 url("/assets/course14/social-challenge.png") no-repeat;
margin-right: 5px;
}
.social-facebook {
background: #16a085 url("/assets/course14/social-challenge.png") no-repeat 0 0;
}
.social-twitter {
background: #16a085 url("/assets/course14/social-challenge.png") no-repeat -30px 0;
}
.social-google_accounts {
background: #16a085 url("/assets/course14/social-challenge.png") no-repeat -60px 0;
}

и на будущие div по умолчанию display:block т.к это блочный элемент, паддинги очень портят картину если их применять не в нужном месте. Главная проблема была я думаю все таки в том что ты не задал блоку buttons высоту, я обычно чтоб посмотреть в чем собака зарыта в блоке окрашиваю его в другой цвет и становиться видно где лишний отступ.

2 лайка

понятно. спасибо

Обращайтесь)