9/18 текст и нижняя граница блока не совпадают.

Курсы §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;
}
.bloc {
background:#1abc9c;
width:200px;
padding:15px 20px;
color:white;
/font-weight:normal;/
}
.social {
display:inline-block;
width:30px;
height:30px;
background:#16a085 url("/assets/course14/social-challenge.png") no-repeat;
margin-right:5px;
vertical-align:middle;
}
.vk {
background-position: 0 0;
}
.fb {
background-position: -30px 0;
}
.go {
background-position: -60px 0;
}

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

2

html код дайте.

1 лайк
3

У вас куска кода не хватает. Вы использовали инлайновые стили?

4

я вот поэтому и попросил html код потому что чего то нехватает)

5 
`<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <title>Испытание: карточка курса</title>
    </head>
    <body>
        <div class="bloc">
        <h2>Курс &laquo;Фоны&raquo;</h2>
       <p>Учимся использовать<br> фоновые цвета и изображения, разбираемся с форматами, знакомимся с приёмами создания декоративных эффектов.</p>
       
           <a href="" class="social vk"></a>
           <a href="" class="social fb"></a>
           <a href="" class="social go"></a>
           
       </div>
    </body>
</html>`
6

Кнопка для вставки кода в редакторе сообщений </>

7

что то да, как то не вышло у вас:)

8

так это… и кнопку использую

9

htm_academ.jpg1920×1200 340 KB

10

посмотрите так пожалуйста

11

Задавайте отдельно div на заголовок, текст и ссылки. Отступов по другому не задать.

12

div с классами, в смысле)

13

советую переделать код, полностью, полагаясь на совет Gnom. Там какая то ерунда получается вообще если ваш код копировать в редактор.

2 лайка
14

А, кстати, нет, я по своему изначальному коду судила) Сейчас сделала с одним общим divом все отступы. Прошу прощения за дезинформацию. Могу скинуть код, но, автор, может сами попробуете? Подсказка: отступы задавайте в css тегу div, ему же надо задать правильный display. Заголовок проще подгонять не при помощи h2,а пользуясь font-size при изначальном теге<p>. Cодержание (“учимся использовать…”)можно не оборачивать в теги. Нужные переносы можно оформить при помощи <br>. Попробуйте.