如何用Flex消除侧边栏激活链接镜像元素间的间隙

我有一个包含两个链接的侧边栏，当前激活的路由会在侧边栏中显示一个镜像元素（如About链接所示），希望消除两个“About”元素之间的间隙。

原HTML代码 #

<div id="sideBarLinks">
  <div className="sidebar-link-singlewrap">
    <Link to="/about">About</Link>
    {location.pathname === '/about' ? <p className="upside-down-p">About</p> : null }
  </div>
  <div className="sidebar-link-singlewrap">
    <Link to="/">Home</Link>
    {location.pathname === '/' ? <p className="upside-down-p">Home</p> : null }
  </div>
  <HeaderSearch />
</div>

原CSS代码 #

#sideBarLinks {
  display: none;
  flex-direction: column;
  gap: 2rem;
  padding-left: 10px;
  .sidebar-link-singlewrap {
    display: flex;
    flex-direction: column;
    a {
      text-decoration: none;
      color: black;
    }
    p {
      margin: 0;
      transform: rotateX(180);
    }
  }
}

补充测试代码 #

CSS #

div {
  display: flex;
  flex-direction: column;
}
a {
  margin: 0;
}
p {
  margin: 0;
  transform: rotateX(180deg);
}

HTML #

<div>
  <a>Test</a>
  <p>Test</p>
</div>

间隙主要来自两个地方：一是元素默认行高产生的垂直空间，二是flex布局的默认对齐方式或隐含间隙。按以下方式调整即可解决：

1. 修正核心样式 #

修改.sidebar-link-singlewrap的flex布局设置，清除内部间隙，同时统一行高：

#sideBarLinks {
  display: none;
  flex-direction: column;
  gap: 2rem;
  padding-left: 10px;
  .sidebar-link-singlewrap {
    display: flex;
    flex-direction: column;
    gap: 0; /* 清除flex列布局的内部间隙 */
    align-items: flex-start; /* 避免元素居中产生额外空间 */
    a {
      text-decoration: none;
      color: black;
      margin: 0;
      line-height: 1; /* 消除行高带来的垂直间距 */
    }
    p {
      margin: 0;
      transform: rotateX(180deg); /* 修正原代码缺少单位的错误 */
      line-height: 1; /* 和链接保持一致行高 */
    }
  }
}

2. 极端情况兜底 #

如果仍有间隙，强制消除元素的内外边距：

.sidebar-link-singlewrap a,
.sidebar-link-singlewrap p {
  display: block;
  margin: 0 !important;
  padding: 0;
}

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