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


#1

Здравствуйте. Испытание: карточка курса [9/18].

    <!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8">
        <title>Испытание: карточка курса</title>
    </head>
    <body>
        <div class='content'>
        <h1>Курс «Фоны»</h1>
        <p class='text'>Учимся использовать фоновые цвета и изображения, разбираемся с форматами, знакомимся с приёмами создания декоративных эффектов.</p>
        
        
            <a class='social fac'>
               
                </a>
                <a class='social tw'>
                </a>
                
                <a class='social gplus'>
                </a>
       </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;
}
.content
{
    background-color:#1abc9c;
    padding:20px 20px 17px 20px;
    max-width:200px;
    margin:0;
}
h1
{
        
    color:white;
    font-size:20px;
    font-weight:normal;
    padding:0;
    margin:0;
}
.text
{
    color:white;
    padding:20px 0px;
    padding-bottom:25px;
    margin:0 0;
}
.social
{
    display:inline-block;
    background:#16a085 url("/assets/course14/social-challenge.png") no-repeat;
    width:30px;
    height:30px;
    margin:0px;
    margin-right:5px;
    
}

.fac
{
    background-position:0 0;
}

.tw
{
    background-position:-30px 0;
}

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

Что у меня не так с кодом? Мне приходится ставить нижний внутренний отступ 17px блоку, который идет сразу после body (.content), хотя в условии сказано, что все отступы кратны 5 или 10.

И ещё вопрос, что нужно сделать, чтобы на айфоне работало корректно? Не работает выделение текста, вставка и копирование из/в буфер обмена, бывает поля ввода теряют фокус ввода, т.е. курсор в поле отображается, но ввод символов не идет.

Заранее спасибо за ответы.


#2

Сначала расскажите, где этот div.content у вас заканчивается? Закрывающего тега не вижу…


#3

В коде исправил. Перед закрытием body он закрывается


#4

Для .social нужно вертикальное выравнивание по верху.


#5

Спасибо, работает. Но почему так, не очень понял. Я фиксирую margin у .text и .social, откуда ещё 3 пикселя отступа берутся , если выравнивание не прописывать?


#6

О пробелах у блочно-строчных элементов знаете?


#7

Ну это типо то, что они не вплотную в строке идут, а с пробелом? Эти же пробелы сбоку?


#8

У картинок и сбоку, и снизу)
Поэтому выравнивание по вертикали для блочно-строчных элементов является обязательным.


#9

Т.е., получается, сам себе прописывает зачем-то margin справа и снизу? А как выравнивание исправляет? Ну вот прописал я выровнять по верху, почему он не ставит в таком случае margin снизу?


#10

Честно, не знаю. Может у кого-то другого будут теории по этому поводу.


#11

А на айфоне как сделать, чтобы работало корректно?


#12

Проблема с потерей фокуса у полей ввода и выделением наверное не только у айфона. Просто мобильное устройство не предназначено для выполнения заданий.


#13

На андроиде тоже эти проблемы есть.
Спасибо за помощь