Не могу освободить место между гамбургерами — CSS попутного ветра

#html #tailwind-css

Вопрос:

Я пробовал использовать space-y-2 и leading , но до сих пор не могу сделать промежутки между ними.

 <a href="" class="bg-blue-dark lg:hidden">
    <span class="block w-7 h-1 mb-1"></span>
    <span class="block w-7 h-1 mb-1"></span>
    <span class="block w-7 h-1"></span>                    
</a>
 

Ответ №1:

Согласно вашему текущему коду, между вашими гамбургерными батончиками есть пространство, потому что вы использовали класс нижнего предела mb-1 , т. е.

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

     <a href="" class="bg-blue-dark lg:hidden h-5 flex flex-col justify-between">
         <span class="block w-7 h-1"></span>
         <span class="block w-7 h-1"></span>
         <span class="block w-7 h-1"></span>                    
    </a>
 

*Если bg-blue-dark ваш пользовательский класс добавляет цвет к полосам, добавьте его в <span> теги вместо <a> тега.