В Котике это паддинг у хедера или nav, смотря что вы написали в разметке.
- Попробуйте подумать о том, что должно быть с этим отступом, если блок переедет в другое место (представьте что это не хедер)
- Посмотрите на другую ширину макета, например, на мобилку, там есть прямые подсказки.
- Посмотрите, а что с нижним отступом. Всякое бывает в жизни, но отступы стараются стремиться к визуальной симметрии.
- Можно мысленно (или не мысленно) залить блок цветным фоном это помогает понять, красиво ему так или не очень.
Василий Банников, какое дело доступности до непосредственно иконочных шрифтов? Вот использовать их действительно можно по-разному. И так, что доступность не пострадает и так что проклянут.
Но это ни в коем случае не аргумент их использовать в 2024.
szQocks, суть особо не изменилась по сравнению со спрайтом на symbol.
Можно продолжать называть спрайтом. Главное, что не на symbol и что работает везде.
Что можно улучшить:
- Я бы заменила абсолют на грид. Тогда псевдо не провалится под фон страницы со своим отрицательным z-index.
- Кнопка с фикс размерами уязвима к переполнению и обычно так не делают.
- all у transition - зачем заставлять браузер думать обо всех свойствах, когда по факту меняются два.
Дизайнер нарисовал какую-то конкретную ширину (он же не может нарисовать все). На этой ширине вьюпорта всё должно выглядеть как в макете.
А дальше перестраиваете, чтобы на любой ширине хорошо выглядело.
Если самому никак, консультируйтесь с дизайнером.
valgerofficial,
1. Узнать сколько всего элементов. Сложить в переменную.
2. При каждом клике вычитать 4
3. Проверять что вышло. Если меньше нуля, добавить кнопке класс, который её скроет. Либо атрибут hidden.