Не могу подобрать отступы

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

Помогите, пожалуйста, подобрать отступы

image.png1920×1080 288 KB

html,
body {
margin: 0;
padding: 0;
}

body {
width: 280px;
min-height: 280px;
padding: 5px;
font-family: “Arial”, sans-serif;
font-size: 14px;
line-height: 1.4;
background: #ecf0f1;
}

.main-menu a {
text-decoration: none;
color: #ffffff;
display: block;

}

.main-menu li {
list-style: none;
}

.main-menu>li>a {
border-bottom: 2px solid #2c3e50;
background: #2980b9;
width: 170px;
margin-left: -35px;
min-height: 20px;
padding: 10px 15px
}
.main-menu>.active>a {
border-bottom: 2px solid #2c3e50;
background: #1abc9c;
}

.main-menu li li a{
background: #ffffff;
color: #2980b9;
text-decoration: underline;
margin-left: -75px;
padding: 10px 15px;
width: 170px;

}

2

Запомните одну вещь. Если в своем коде вам пришлось использовать отрицательные отступы, то значит что-то уже не так.

В курсе несколько раз упоминается о необходимости сброса внешних и внутренних отступов у списка. Обратите свое внимание на это.

Отступы между ссылками подменю будут меньше чем отступы ссылок в основном меню.
Также вам нужно будет добавить отступы сверху и снизу для списка подменю:
.main-menu ul { }

3

Вроде разобрался, проверьте пожалуйста код

image.png1280×1024 205 KB

html,
body {
margin: 0;
padding: 0;
}
body {
width: 280px;
min-height: 280px;
padding: 10px;
font-family: “Arial”, sans-serif;
font-size: 14px;
line-height: 1.4;
background: #ecf0f1;
}

.main-menu a {
text-decoration: none;
color: #ffffff;
display: block;

}

.main-menu {
margin: 0px;
padding: 0px;
}

.main-menu li {
list-style: none;
}

.main-menu>li>a {
border-bottom: 2px solid #2c3e50;
background: #2980b9;
width: 170px;
margin-left: 0px;
min-height: 18px;
padding: 10px 15px
}
.main-menu>.active>a {
border-bottom: 2px solid #2c3e50;
background: #1abc9c;
}

.main-menu li li a{
background: #ffffff;
color: #2980b9;
text-decoration: underline;
margin-left: 0px;
padding: 5px 15px;
width: 170px;

}

.main-menu ul {
border-bottom: 2px solid #2c3e50;
display: block;
padding: 10px 0;
margin: 0px 0;
background: #ffffff;
width: 200px;
}

4

Подскажите, всегда нужно сбрасывать отступы? Почему без этого так уходит список?

5

Отступы - это часть базового оформления. Теги, предназначенные для оформления текста, имеют свои нигде не прописанные стили. Это как бонус. Например, css-файл по каким-то причинам не загрузился, но кое-какое оформление все равно присутствует. У списка есть маркеры или нумерация, заголовки все равно выделены полужирным, отступы есть…

Поэтому, если вы верстаете меню, то сброс стилей является обязательным.

Просмотрите свой код. Вы обнуляете отступы у списков, а у ссылок зачем обнулять? Их и так нет.
Тег ul является блочным по умолчанию. Запись display: block; здесь не требуется. Сброс маркеров вы могли написать в правиле для списка, не создавая отдельное правило для пунктов меню.

6

Всё понял, спасибо огромное!
Сбрасывать нужно только когда верстаешь меню или всегда и сбрасывать нужно только отступы ?

7

Сбрасывается всё лишнее в зависимости от поставленной задачи.
Почитайте статью еще.