使用Tailwind CSS制作汉堡菜单时无法为线条添加间距该如何解决

问题原因 #

1. 父级<a>标签默认是行内元素，无法正常识别垂直方向的间距规则，同时space-y-*类生效的前提是父元素为块级、弹性或网格容器，行内元素不满足生效条件。
2. leading属性用于控制文本行高，对当前空的块级线条元素没有间距调节作用，且你提供的代码中未给父元素添加space-y-2类，自然不会生效。
3. 行内元素的高度默认由文本行高决定，即便子元素设置了垂直外边距，也无法正常撑开父元素高度，看起来就像间距没生效。

解决方法 #

• 给父级<a>标签添加flex flex-col类，将其转为纵向弹性容器，满足space-y-*的生效条件，搭配w-fit类可以让父容器宽度自适应内容，不会占满整行。
• 删除子元素上重复的mb-1类，直接在父元素上添加space-y-2即可统一控制所有线条的垂直间距。
• 记得给线条<span>添加背景色类，否则线条不会显示。

修正后的代码示例：

<a href="" class="bg-blue-dark lg:hidden flex flex-col w-fit space-y-2 p-2">
    <span class="block w-7 h-1 bg-white"></span>
    <span class="block w-7 h-1 bg-white"></span>
    <span class="block w-7 h-1 bg-white"></span>                    
</a>

内容的提问来源于stack exchange，提问作者doubt