как сделать верхний отступ между body и внутренним содержимым?

Курсы §13. Мастерская: создаём меню
1

вроде сделал испытание, но есть вопрос.

<!DOCTYPE html>
<html>
    <head>
       <title>Испытание: вертикальное меню</title>
       <meta charset="utf-8">
    </head>
    <body>
        <ul class="menu">
            <li>Курсы</li>
            <li class="active">Демонстрации</li>
            <li>Участники</li>
            <li>Достижения</li>
            <li>Профиль</li>
        </ul>
    </body>
</html>

html{
    background:#FFFFFF;  /*белый фон страницы*/
}
body{
    margin:0;
    width:300px;
    height:300px;
    font-family:Arial, sans-serif;
    font-size:14px;
    line-height:1.4;
    background:#ecf0f1; /*серый фон body*/
}
.menu{
    margin:10px;
    background:#2980B9; /*синий фон ul*/
    color:white;
    width:200px;
    list-style:none;
    padding:0;         /*обнулил отступы li*/
}
.menu li{
    border-bottom:2px solid #2C3E50;
    padding:10px 15px;   /*отступы для внутренностей li*/
}
.menu .active{
    background:#1ABC9C; /*зелёный фон .active*/
    border-bottom:2px solid #2ECC71 ;
}

как сделать верхний отступ между “серым” body и “синим” ul?

2

Проще всего обнулить margin у меню и добавить паддинг body.

А вообще такое поведение разбирается тут https://htmlacademy.ru/courses/44/run/10.

3

спасибо. в задании белый фон у html
серый фон у body
синий фон у .menu(у списка)
как сделать отступ между html и body?

и зачем такая запись?
html, body{
margin:0;
padding:0;
}

4

По умолчанию браузеры могут добавлять отступы для body или html. Если зададите паддинг у боди, то добавится внутренний отступ :grinning: