Выполнил на 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; }