9/18 100% Прокомментируйте код

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <title>Испытание: карточка курса</title>
    </head>
    <body>
        <div class="block">
            <div class="header">Курс &laquo;Фоны&raquo;</div>
            <div class="text">
             Учимся использовать фоновые цвета и изображения, разбираемся с форматами, знакомимся с приёмами создания декоративных эффектов.   
            </div>
            <div class="links">
                <div class="social fb"></div>
                <div class="social tw"></div>
                <div class="social go"></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;
font-family: “Arial”, sans-serif;
line-height: 1.2;
background: #ecf0f1;
}
.block{
background-color: #1abc9c;
width: 240px;
height: 235px;
color: white;

}
.header{
font-size: 20px;
padding: 20px;

}
.text{
padding: 20px;
margin-right: 5px;
margin-top: -20px;
}
.links{
padding: 20px;
margin-top: -15px;

}
.social{
width: 30px;
height: 30px;
display: inline-block;
margin-right: 5px;

}
.fb{
background: #16a085 url(/assets/course14/social-challenge.png) no-repeat;
}
.tw{
background: #16a085 url(/assets/course14/social-challenge.png) no-repeat -30px;
}
.go{
background: #16a085 url(/assets/course14/social-challenge.png) no-repeat -60px;
}`

Пока нечего комментировать:)

А вот все есть чего

Не могу понять почему не отображает HTML в сообщении

Что хотите услышать о данном коде?

Интересно мнение профессионала) Может можно сократить или упростить.

Про отрицательные отступы скорее всего… Код в сообщение вставляется с помощью кнопки </> на панели сверху или сочетания клавиш Ctrl+Shift+C.

Да, про них!) Вроде так и делал…

О… Тут правда есть о чем поговорить. Во-первых, где ссылки на соцсети?

Оставляю это на вас ибо немного некогда:)

Ничего. Разберемся)

<head>
    <meta charset="utf-8">
    <title>Испытание: карточка курса</title>
</head>
<body>
    <div class="block">
        <div class="header">Курс &laquo;Фоны&raquo;</div>
        <div class="text">
         Учимся использовать фоновые цвета и изображения, разбираемся с форматами, знакомимся с приёмами создания декоративных эффектов.   
        </div>
        <div class="links">
            <a href="#1" class="social fb"></a>
            <a href="#2" class="social tw"></a>
            <a href="#3" class="social go"></a>
        </div>
    </div>
    
</body>

Еще хотелось бы увидеть, что текст в блоках дополнительно обернут в заголовок и параграф. Соответственно css-код поменяется немного.

<div class="block"> <h1>Курс &laquo;Фоны&raquo;</h1> <div class="text"> <p>Учимся использовать фоновые цвета и изображения, разбираемся с форматами, знакомимся с приёмами создания декоративных эффектов.</p> </div> <div class="links"> <a href="#1" class="social fb"></a> <a href="#2" class="social tw"></a> <a href="#3" class="social go"></a> </div> </div>

`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;
}

.block{
background-color: #1abc9c;
width: 240px;
height: 235px;
color: white;
margin-top: -13px
}

h1{
font-size: 20px;
padding: 20px;
font-weight: normal
}

.text{
padding: 20px;
margin-right: 5px;
margin-top: -48px;
}

.links{
padding: 20px;
margin-top: -29px;
}

.social{
width: 30px;
height: 30px;
display: inline-block;
margin-right: 5px;
}

.fb{
background: #16a085 url(/assets/course14/social-challenge.png) no-repeat;
}

.tw{
background: #16a085 url(/assets/course14/social-challenge.png) no-repeat -30px;
}

.go{
background: #16a085 url(/assets/course14/social-challenge.png) no-repeat -60px;
}

.a{
display: block;
}`

Боритесь за кратные 5 отступы, если у вас не так значит где то ошибку допустили.

Плюсом к тому, что вам посоветовал Aleksey_Fers, обратите внимание вот на это

Задавая этой строчке заголовок первого уровня, вы несколько утяжеляете ccs-код, задавая font-weight: normal
Можно обернуть строку в тег <p>, а вот отсюда

этот тег убрать, вы же в див с классом абзац обернули уже.

Этому [quote=“Dmt05, post:16, topic:3535”]
h1{ font-size: 20px; padding: 20px; font-weight: normal }
[/quote] (с изменением h1 на р)
и этому

я бы задала display:inline-block;, а дальше можно работать над кратностью отступов.

Позволю себе все-таки не согласится с вами. Текст в блоке должен быть дополнительно оформлен, как параграф или заголовок, или любой другой подходящий элемент.

Возможно, я что-то упустила в теории, но с какой целью? Можно ведь обойтись.