Как убрать отступ сверху?
Знаю что это схлопывание, но не могу исправить.
Спасибо.
<!DOCTYPE html>
<html>
<!--
Шапка сайта.
Верстка - Yaradan.
-->
<head>
<meta charset="UTF-8">
<title>Шапка</title>
<style>
* {
margin: 0; /*Отступы у всей страницы*/
}
a {
color: #FFFAFA; /*Цвет ссылок*/
text-decoration: none; /*Убираем нижнее подчеркивание у ссылок*/
}
#header {
margin: 0 auto; /*Выравниваем по центру*/
width: 791px; /*Ширина слоя шапки*/
height: 40px; /*Высота*/
background: #32CD32; /*Цвет слоя*/
border-radius: 10px 10px 10px 10px; /*Закругляем углы*/
}
.logo span {
font-size: 30px; /*Размер логотипа*/
color: #ffffff; /*Цвет логотипа*/
padding: 0px 0px 0px 10px; /*Отступы вокруг логотипа*/
float: left; /*Прижимаем к левому краю*/
}
.menu {
list-style-type: none; /*Убираем маркеры у списка*/
float: right; /*Прижимаем к правому краю*/
margin: 0px 10px 0px 0px; /*Отступы у меню*/
}
.menu li {
display: inline-block; /*Делаем пункты меню строчными*/
color: #FFFAFA; /*Цвет текста*/
padding: 11px; /*Внутрение отступы*/
}
.menu li:hover {
background: #228B22; /*Меняем фон при наведении*/
display: inline-block;
color: #FFFAFA;
padding: 11px 11px 7px 11px;
}
</style>
</head>
<body>
<div id="wrappers">
<div id="header">
<div class="logo">
<span>Логотип</span>
</div>
<ul class="menu">
<li><a href="#">Люди</a></li>
<li><a href="#">Почта</a></li>
</ul>
</div>
</div>
</body>
</html>