9/18 Испытание: карточка курса

Курсы §14. Мастерская: декоративные элементы
1

Немогу понять, почему, когда убрать у “h1” margin-top: 0; то отступ стает сверху больше, также у “p” если убрать margin-bottom: 0; і сделать минимальную высоту контейнера “card”, а не фиксурованую, то отступ тоже увеличивается. Предполагаю что заголовки и абзацы имеют внешние отступы по умолчанию?
Оцените код пожалуйста, не знаю будет ли он 100%, почти был но попытки закончились)

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

СSS
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;
}

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

h1 {
margin-top: 0;
margin-bottom: 20px;
font-size: 20px;
font-weight: normal;
}

p {
margin-bottom: 0;
}

.social {
display: inline-block;
width: 30px;
height: 30px;
margin-top: 25px;
margin-right: 5px;
background-color: #16a085;
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-google {
background-position: -60px 0;
}

1 лайк
2

Да, вы правы. Элементы имеют свои отступы по умолчанию.
Код хороший, единственное замечание: где закрывающий тег параграфа?

2 лайка
3

Спасибо за ответ и что подсказали про параграф, забыл что для него нужен закрывающий тег)

1 лайк
4

100% результат
html

<!DO  CTYPE html>
    <html lang="ru">
        <head>
            <meta charset="utf-8">
            <title>Испытание: карточка курса</title>
        </head>
        <body>
            <div class="fon">
            <div class="blank">
            <h3>Курс &laquo;Фоны&raquo;</h3>
            <p>
            Учимся использовать<br> фоновые цвета и <br>изображения, разбираемся с<br> форматами, знакомимся с<br> приёмами создания<br> декоративных эффектов.</p>
            
           
           <div class="share">
           
                <a class="social social-vk" href="http://vk.com/htmlacademy"></a>
                <a class="social social-fb" href="http://www.facebook.com/htmlacademy"></a>
                <a class="social social-tw" href="http://twitter.com/htmlacademy_ru"></a>
            </div>
            </div></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:  #ffffff;
color:#ffffff;
}
.fon{width:270px;
height:280px;
padding-right:10px;
margin-left:-30px;
padding-left:30px;
margin-top:-30px;
padding-top:30px;
background:#ecf0f1;}
h3{font-weight:500;
font-size:20px;
margin-top:15px;}
.blank{background:#1abc9c;
width:215px;
height:230px;
vertical-align:middle;
padding-top:5px;
padding-right:5px;
padding-left:20px;}


.share {
width: 160px;
   
   

   

}

.share b {
margin-right: 15px;
font-weight: normal;
text-transform: uppercase;
color: #7f8c8d;
}

.social {
display: inline-block;
width: 30px;
height: 30px;
margin-right:5px;
margin-top:11px;
margin-bottom:20px;
background: #bdc3c7;
vertical-align: middle;
background:url(/assets/course14/social-challenge.png) no-repeat;
}

.social-vk {

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

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

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

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

5

Вы бы, если уж выкладываете своё решение, как-то аккуратней оформляли код - а то слеплено всё в кучу, половина CSS - вязь без пробелов, думаете, кто-то будет это разбирать? Разметка абы как показана, с пропусками тегов… И с выполнением критериев задания - там сказано про кратность отступов 5 или 10, у Вас же margin-top: 11;