Мастерская: декоративные элементы / Испытание: карточка курса [9/18]


#1

Добрый день, этот код воспринимает на 100%, но в .social margin-top: 11px;(при 10px - 99%), что не соответствует ТЗ , подскажите пожалуйста, что не так.

    <!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <title>Испытание: карточка курса</title>
    </head>
    <body>
        <div class="fon">
            <p class="title">Курс &laquo;Фоны&raquo;</p>
            <p>Учимся использовать фоновые цвета и изображения, разбираемся с форматами, знакомимся с приёмами создания декоративных эффектов.
            </p>
            <div class="social-footer">                
                <a class="social social-fb" href="http://www.facebook.com"></a>
                <a class="social social-tw" href="http://twitter.com"></a>
                <a class="social social-g" href="http://google.ru"></a>
            </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;
}
div.fon{
/* общий зеленый фон /
background: #1abc9c;
width: 240px;
height: 235px;
color: white;
margin-top: -20px; /
иначе белая полоса в body /
}
.title{
/заголовок/
font-size: 20px;
padding-top:20px;
}
p{
padding: 0 20px;
}
.social-footer{
padding: 0 20px;
}
.social{
width: 30px;
height: 30px;
margin-top: 11px; /
нет “кратности” /
margin-right: 5px;
display: inline-block;
background: #16a085 url(/assets/course14/social-challenge.png) no-repeat;
}
/
.social-fb{}*/
.social-tw{
background-position: -30px 0;
}
.social-g{
background-position: -60px 0;
}


#2

У параграфов есть внешние отступы по умолчанию. Вы их не обнуляете. Поэтому не выполняется условие кратности и присутствует отрицательный отступ у .fon.


#4

у меня глюканул минибраузер, так что проверять пришлось в Dreamweaver, все получилось с кратностью, в .fon margin не понадобился.
Большое спасибо