如何缩小网站特定链接间的间距，保留其他链接原有间距？

要实现部分链接间距缩小、其他保持原有大间距的效果，核心思路是通过自定义CSS类针对性控制样式，具体步骤如下：

方法一：给单个目标链接添加专属类 #

1. 修改HTML结构 #

给需要缩小间距的.sub-item链接添加额外类（比如compact-item）：

<a class="sub-btn">Aktionen<i class="fas fa-angle-right dropdown"></i></a>
<div class="sub-menu">
   <!-- 需缩小间距的链接添加compact-item类 -->
   <a href="#" class="sub-item compact-item">Känguru der Mathematik</a>
   <a href="#" class="sub-item compact-item">Der EKS stellt sich vor</a>
   <a href="#" class="sub-item compact-item">Mathematikwettbewerb 2021 Runde 2</a>
   <!-- 保持原间距的链接保留原类 -->
   <a href="#" class="sub-item">101 neue FünftklässlerInnen</a>
   <a href="#" class="sub-item">Müllsammelaktion</a>
   <!-- 其他链接按需添加类 -->
   <a href="#" class="sub-item">Materialliste</a>
</div>

2. 添加CSS样式 #

先设置所有.sub-item的默认大间距，再用专属类覆盖目标链接的间距：

/* 默认链接样式：原有大间距 */
.sub-item {
  display: block; /* 确保垂直排列，根据布局调整 */
  margin-bottom: 1.5rem; /* 原有大间距值，替换成你实际使用的数值 */
  /* 其他原有样式（如颜色、字体等）保留 */
}

/* 目标链接样式：缩小后的间距 */
.sub-item.compact-item {
  margin-bottom: 0.5rem; /* 缩小后的间距值，按需调整 */
}

方法二：分组控制链接间距（适合批量调整） #

如果需要让某一组链接内部间距缩小，组与组之间保持大间距，可以用容器包裹分组：

1. 修改HTML结构 #

<a class="sub-btn">Aktionen<i class="fas fa-angle-right dropdown"></i></a>
<div class="sub-menu">
  <!-- 用容器包裹需要缩小间距的链接组 -->
  <div class="compact-group">
    <a href="#" class="sub-item">Känguru der Mathematik</a>
    <a href="#" class="sub-item">Der EKS stellt sich vor</a>
    <a href="#" class="sub-item">Mathematikwettbewerb 2021 Runde 2</a>
  </div>
  <!-- 其他保持原间距的链接 -->
  <a href="#" class="sub-item">101 neue FünftklässlerInnen</a>
  <a href="#" class="sub-item">Müllsammelaktion</a>
  <a href="#" class="sub-item">Materialliste</a>
</div>

2. 添加CSS样式 #

/* 默认链接样式：原有大间距 */
.sub-item {
  display: block;
  margin-bottom: 1.5rem;
}

/* 分组内的链接：缩小间距 */
.compact-group .sub-item {
  margin-bottom: 0.5rem;
}

/* 分组容器：保持与其他链接的大间距 */
.compact-group {
  margin-bottom: 1.5rem;
}

注意事项 #

• 如果你的原有间距是用padding而非margin控制，只需把上述代码中的margin-bottom替换为padding-bottom即可。
• 若.sub-menu使用Flex/Grid布局，可调整gap属性，但用类覆盖的方式依然适用，灵活性更高。

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