Как верстать меню, ссылки которого с разными отступами?

Для верстки меню с ссылками, у которых разные отступы, можно использовать различные методы. Ниже я расскажу о двух наиболее популярных подходах.

1. Использование списков
Один из способов верстки такого меню - использование HTML-списков и установка нужных отступов с помощью CSS. Вот пример кода для такой верстки:

   <ul class="menu">
     <li><a href="#" class="link">Ссылка 1</a></li>
     <li><a href="#" class="link">Ссылка 2</a></li>
     <li><a href="#" class="link">Ссылка 3</a></li>
   </ul>

   .menu {
     list-style: none;
     padding: 0;
     margin: 0;
   }

   .menu li {
     margin-bottom: 10px; /* Устанавливаем отступ между ссылками */
   }

   .link {
     display: block;
     padding: 5px;
     text-decoration: none;
     background-color: #f2f2f2;
   }

В этом примере ссылки обернуты в элементы списка <li>, установлен отступ между ними с помощью свойства margin-bottom, а стилизация ссылок выполняется с помощью класса .link.

2. Использование гридов или флексбоксов
Другой подход - использование CSS-гридов или флексбоксов для создания гибкого макета меню с разными отступами. Вот пример кода:

   <div class="menu">
     <a href="#" class="link">Ссылка 1</a>
     <a href="#" class="link">Ссылка 2</a>
     <a href="#" class="link">Ссылка 3</a>
   </div>

   .menu {
     display: grid;
     grid-gap: 10px; /* Устанавливаем отступ между ссылками */
     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   }

   .link {
     display: block;
     padding: 5px;
     text-decoration: none;
     background-color: #f2f2f2;
   }

В этом примере мы используем CSS-гриды для создания гибкого контейнера меню, устанавливаем отступ между ссылками с помощью свойства grid-gap, а макет ссылок формируется с помощью свойства grid-template-columns и фракций.

Оба этих подхода имеют свои преимущества и недостатки, выбор зависит от требований к дизайну и функциональности вашего меню.