使用Tailwind时，块级容器内两div间的水平线为何出现空白？

问题根源 #

你遇到的空白来自两个核心原因：

1. 行内元素空白符：父容器通过[&>div]:inline-flex给所有直接子div设置了行内弹性布局，行内级元素之间的换行、空格等空白符会被浏览器渲染为可见的间隙。
2. 继承了不必要的样式：用于水平线的div也继承了父容器给所有子div设置的pl-4（左内边距）、w-[90%]（宽度90%）、[&>div:not(:last-child)]:bg-[#fef2ed]（背景色）等样式，导致水平线本身的布局不对，视觉上放大了空白感。

解决方案（保持块级布局，不影响过渡动画） #

方案1：直接覆盖水平线div的继承样式 #

给水平线div添加优先级更高的样式，强制它为块级元素并清除不必要的继承属性：

<div class="h-1 border border-t-0 w-full !block !pl-0 !bg-transparent"></div>

• !block：强制将水平线div设为块级元素，消除行内元素的空白符间隙
• !pl-0：取消父容器继承的左内边距，让水平线全屏对齐
• !bg-transparent：覆盖[&>div:not(:last-child)]:bg-[#fef2ed]的背景色，避免水平线区域出现多余背景

方案2：修改父容器样式，排除水平线div #

如果不想用!important类，可以给水平线div加一个专属类，然后让父容器的全局样式跳过它：

1. 修改父容器的样式规则，给所有子div选择器加上:not(.divider)排除项：

<div className={`absolute w-64 bg-white shadow-custom overflow-hidden 
      z-10 -left-56 mt-1 rounded-[10px] text-center
      [&>div:not(.divider)]:w-[90%] [&>div:not(.divider)]:inline-flex [&>div:not(.divider)]:items-start [&>div:not(.divider)]:pl-4 [&>div:not(.divider)]:flex-col
      [&>div:not(.divider)]:justify-center
      [&>div:not(:last-child):not(.divider)]:bg-[#fef2ed] [&>div:hover:not(.divider)]:cursor-pointer [&>div:not(.divider)]:rounded-lg
      ${userDropdown ? " h-44" : "h-0"} duration-200`}>

2. 给水平线div添加divider类：

<div class="divider h-1 border border-t-0 w-full"></div>

这样父容器的行内布局、内边距等样式就不会作用到水平线div，从根源避免空白问题，同时保持原有过渡动画的稳定性。

内容的提问来源于stack exchange，提问作者rax-hacks