вроде сделал испытание, но есть вопрос.
<!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?