React+TailwindCSS背景色异常：父容器黑背景未覆盖子组件

问题分析 #

核心问题是父容器设置了固定高度h-[14px]，容器高度仅能覆盖第一行文本，后续链接及间距区域超出容器范围，无法显示父容器的黑色背景。后续给子元素单独加bg-black的做法仅能覆盖链接本身，链接间的gap-[32px]空白区域依然没有背景。

效果说明 #

• 当前效果：仅"Our Company"区域显示黑色背景，"Locations"、"Contact"区域无黑色背景
• 期望效果：整个菜单（含三个链接及间距）均为黑色背景
• 尝试修改后效果：每个链接单独有黑色背景，但链接间空白区域仍无背景

解决方案 #

移除父容器的固定高度h-[14px]，让容器根据子元素自动撑开高度，父容器的bg-black就能覆盖整个菜单区域（包括间距部分）。

修改后的代码：

<div
  id="menu-elements"
  className="flex md:hidden gap-[32px] flex-col bg-black text-red-500 my-12 mx-6 tracking-[2px] text-sm leading-[14px] uppercase"
>
  <Link to="/ourCompany">Our Company</Link>
  <Link to="/locations">Locations</Link>
  <Link to="/Contact">Contact</Link>
</div>

原理说明 #

• 固定高度h-[14px]强制容器高度仅为14px，远小于垂直排列的三个链接+32px间距的总高度，导致容器背景无法覆盖超出部分
• 移除固定高度后，flex-col布局的容器会自动根据子元素的高度和间距撑开，bg-black会铺满整个容器范围
• leading-[14px]已可控制文本行高，无需额外设置容器高度

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