9/18, Испытание: карточка курса. Возник вопрос для обсуждения)

Выполнил на 100%, но Возник вопрос при выполнении испытания.
И так, если не задавать высоту .main-card (контейнеру), то в связи с тем, что ссылки у нас display: inline-block, то они имеют эти “противные” отступы, в том числе снизу (3px), с других сторон они проблем не доставляют.
Я решил это с помощью высоты контейнеру (но тогда эти 3px теряются в паддингах). Можно это сделать за счет отрицательных маргинов. На ум пришел способ вместо <a> использовать <li>.
что Вы думаете?

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Испытание: карточка курса</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div>
      <div class="main-card">
        <span>Курс «Фоны»</span>
        <p>
          Учимся использовать фоновые цвета и изображения, разбираемся с форматами, знакомимся с приёмами создания декоративных эффектов.
        </p>
      <div class="social-container">
        <a class="social social-fb" href="" ></a>
        <a class="social social-tw" href=""></a>
        <a class="social social-goo" href="" ></a>
      </div>
      </div>
    </div>
  </body>
</html>
html,
body {
  margin: 0;
  padding: 0;
}

body {
  width: 280px;
  min-height: 280px;
  padding-top: 20px;
  padding-left: 20px;

  font-size: 14px;
  line-height: 1.2;
  font-family: "Arial", sans-serif;

  background-color: #ecf0f1;
}

.main-card {
  height: 195px;
  width: 200px;
  padding: 20px 20px;
  color: #ffffff;
  background-color: #1abc9c;
}

.main-card span {
  font-size: 20px;  
}

.main-card p {
  margin-top: 20px;
  margin-bottom: 25px;
}

.social {
  display: inline-block;
  background-color: #16a085;
  background-image: url("social-challenge.png");
  background-repeat: no-repeat;
  width: 30px;
  height: 30px;
  margin-right: 5px;
  background-color: #16a085;
}

.social-fb {
  background-position: 0px 0px;
}

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

.social-goo {
  background-position: -60px 0px;
}

Высоту контейнера ограничивать не стоит.
Например, если увеличиться содержание в <p> – кнопки выпадут из контейнера.

Почему вместо? Как потом достучаться к кнопкам без ссылок?

Можно сделать списком, а ссылки вложить в <li>.

точно, надо быть внимательнее. а какие еще варианты приходят на ум?

Вам необходимо выровнять ссылки, то есть блочно-строчные элементы по вертикали. Тогда исчезнут эти 3px.

спасибо, все отлично. а почему так получилось? откуда это отступ

Это особенность блочно-строчных элементов. Еще такой эффект с отступом снизу есть у img.

Спасибо) может посоветуете что-нибудь почитать про такие эффекты html элементов? чтобы не попадаться в следующий раз)