100%, но есть вопрос.

Курсы §14. Мастерская: декоративные элементы
1 
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>Испытание: карточка курса</title>
</head>
<body>
    <div class="kurs">
    <h2>Курс &laquo;Фоны&raquo;</h2>
    <p>Учимся использовать фоновые цвета и изображения, разбираемся с форматами, знакомимся с приёмами создания декоративных эффектов.</p>
    <a class="social social-fb" 
    href="/assets/course14/social-challenge.png"></a>
    <a class="social social-tw" 
    href="/assets/course14/social-challenge.png"></a>
    <a class="social social-gg"
    href="/assets/course14/social-challenge.png"></a>
    </div>
</body>
</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;
}
.kurs{
    width:200px;
    background:#1abc9c;
    color:white;
    padding:20px;
    font-weight:normal;
}
.kurs h2{
   font-size:20px;
   font-weight:normal;
   margin:0;
   padding:0;
}
.kurs p{
    margin:0;
    padding-bottom:25px;
    padding-top:20px;
}

 .social{
     display:inline-block;
     background:#16a085;
     height:30px;
     width:30px;
     margin-right:5px;
     margin-bottom:-3px;
     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-gg {
     background-position:-60px 0;
 }
/*
Все размеры, отступы, координаты, размеры шрифтов (не заданные в body) кратны 5 или 10.
Адрес картинки-спрайта:
/assets/course14/social-challenge.png
*/

Смог достичь 100% только добавив в .social margin-bottom:-3px; Без этого внизу небольшое лишнее пространство мешающее получить 100%
Как это можно исправить?

2

Убрать этот отрицательный отступ и прописать vertical-align: middle;

2 лайка