В прошлом задании мы добавили ссылкам внешние и внутренние отступы. Но внешние отступы по вертикали не появились, а внутренние вышли за пределы навигации — из-за этого фон у ссылки на текущую страницу налез на белую линию.

Главная

Маршруты

Экипировка

Так произошло потому, что по умолчанию ссылки имеют строчный тип бокса. Браузер игнорирует внешние отступы по вертикали у строчных боксов, а их внутренние отступы сверху и снизу не влияют на расположение других элементов и высоту строки.

Рассмотрим пример. Есть четыре ссылки на двух строках. Каждой ссылке заданы внутренние и внешние отступы со всех сторон и свой цвет фона:

Обратите внимание, между ссылками появился горизонтальный отступ, потому что сработали внутренние и внешние отступы по горизонтали. Но при этом внешние отступы по вертикали у ссылок не появились, а внутренние отступы сверху и снизу наложились друг на друга и даже вышли за пределы контейнера. Это обычное поведение для строчных боксов.

Нам нужно, чтобы у ссылок в навигации заработали внешние отступы сверху и снизу, а внутренние отступы по вертикали не выходили за границы навигации. Самый простой способ добиться этого — изменить у ссылок тип бокса. Например, сделать ссылки блочными боксами:

.element {
  display: block;
}

У блочных боксов работают все внешние отступы, а внутренние отступы по вертикали ведут себя так же, как и по горизонтали.

Мы уже превращали блочные боксы в грид- и флекс-контейнеры. Точно так же мы можем превращать строчные боксы в блочные и наоборот. Это не влияет на семантику тега.

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