在HTML/CSS（TailwindCSS）中实现激活Tab边框与全宽边框完美对齐的方法

你遇到的核心问题是：父<ul>的底部边框和激活<li>的底部边框因为盒模型特性产生了垂直错位——<li>的边框位于自身padding外侧，而<ul>的边框在容器底部，两者的位置差导致视觉上不对齐。下面提供两种简洁的修复方案：

方案1：移除父容器边框，为每个Tab项设置边框（推荐） #

这种方式从根源避免多层边框冲突，逻辑更清晰：

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>
<div class="bg-slate-800 rounded-md mb-5 p-8">
  <ul class="flex items-center mb-4">
    <!-- 激活Tab：红色底部边框 -->
    <li class="p-4 border-b-2 border-red-500">
      <a href="" class="font-semibold block">First Tab</a>
    </li>
    <!-- 非激活Tab：和背景协调的边框颜色 -->
    <li class="p-4 border-b-2 border-slate-600">
      <a href="" class="font-semibold block">Second Tab</a>
    </li>
    <li class="p-4 border-b-2 border-slate-600">
      <a href="" class="font-semibold block">Third Tab</a>
    </li>
  </ul>
  <div>
    tab content
  </div>
</div>

每个Tab项都有独立的底部边框，激活项用红色覆盖，视觉上完全模拟全宽边框的效果，且不会出现错位。

方案2：保留父容器边框，用负margin偏移激活项边框 #

如果想保留原有父容器边框的结构，只需给激活的<li>添加负margin抵消边框宽度：

<link href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet"/>
<div class="bg-slate-800 rounded-md mb-5 p-8">
  <ul class="flex items-center mb-4 border-b-2 border-slate-600">
    <!-- mb-[-2px] 让边框向上偏移2px，与父容器边框完全重合 -->
    <li class="p-4 border-b-2 border-red-500 mb-[-2px]">
      <a href="" class="font-semibold block">First Tab</a>
    </li>
    <li class="p-4">
      <a href="" class="font-semibold block">Second Tab</a>
    </li>
    <li class="p-4">
      <a href="" class="font-semibold block">Third Tab</a>
    </li>
  </ul>
  <div>
    tab content
  </div>
</div>

这里mb-[-2px]是关键：因为边框宽度为2px，负margin让激活项的边框向上移动2px，刚好覆盖父容器的边框，实现精准对齐。

额外提示：建议给父容器的边框指定明确颜色（如border-slate-600），避免默认边框颜色和深色背景不协调。

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