在 CSS 中，调整 <li> 列表项的行边距主要涉及以下几个属性：

1. 基础属性

line-height - 行高

控制每行文字的高度（包括文字本身和上下间距）

li {
  line-height: 1.5;      /* 相对值，常用 1.5-2.0 */
  line-height: 24px;     /* 固定像素值 */
  line-height: 150%;     /* 百分比 */
}

margin - 外边距

控制列表项之间的垂直间距

li {
  margin-top: 10px;      /* 每个 li 上方间距 */
  margin-bottom: 10px;   /* 每个 li 下方间距 */
  /* 或简写 */
  margin: 10px 0;        /* 上下 10px，左右 0 */
}

padding - 内边距

控制列表项内容与边框之间的间距

li {
  padding-top: 5px;      /* 内容上方内边距 */
  padding-bottom: 5px;   /* 内容下方内边距 */
  /* 或简写 */
  padding: 8px 0;        /* 上下 8px，左右 0 */
}

2. 完整示例

<style>
  /* 基础列表样式 */
  .list-example1 li {
    line-height: 1.8;           /* 增加行高 */
    margin-bottom: 12px;        /* 列表项之间的间距 */
    padding: 8px 12px;          /* 内容内边距 */
    background: #f5f5f5;
    border-radius: 4px;
  }

  /* 紧凑列表 */
  .compact-list li {
    line-height: 1.4;
    margin: 4px 0;
    padding: 2px 0;
  }

  /* 优雅列表 */
  .elegant-list li {
    line-height: 2;
    margin: 15px 0;
    padding: 12px 20px;
    background: linear-gradient(to right, #f8f9fa, white);
    border-left: 4px solid #3498db;
  }
</style>

<ul class="list-example1">
  <li>列表项 1 - 有合适的行边距</li>
  <li>列表项 2 - 文字不会拥挤</li>
  <li>列表项 3 - 阅读体验良好</li>
</ul>

3. 不同列表类型的处理

无序列表 (ul)

ul {
  padding-left: 0;          /* 移除默认左内边距 */
  margin: 20px 0;           /* 列表整体外边距 */
}

ul li {
  list-style-position: inside;  /* 项目符号在内容框内 */
  line-height: 1.6;
  margin: 8px 0;
  padding-left: 24px;       /* 为项目符号留空间 */
}

有序列表 (ol)

ol {
  padding-left: 20px;       /* 为数字留足够空间 */
}

ol li {
  line-height: 1.7;
  margin: 10px 0;
  padding: 5px 10px;
}

4. 垂直间距控制技巧

方案一：使用 margin

/* 只有列表项之间有间距 */
li + li {
  margin-top: 15px;         /* 相邻兄弟选择器 */
}

方案二：使用 padding

/* 每个列表项内部有统一间距 */
li {
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;  /* 可选分隔线 */
}

方案三：组合使用

li {
  line-height: 1.6;         /* 文字行高 */
  padding: 12px 15px;       /* 内边距 */
  margin: 8px 0;            /* 外边距 */
}

5. 响应式设计

li {
  line-height: 1.5;
  margin: 10px 0;
  padding: 8px 12px;
}

/* 移动端 */
@media (max-width: 768px) {
  li {
    line-height: 1.4;       /* 稍紧凑 */
    margin: 6px 0;          /* 减少间距 */
    padding: 6px 10px;      /* 减少内边距 */
  }
}

/* 桌面端 */
@media (min-width: 1200px) {
  li {
    line-height: 1.8;       /* 更大行高 */
    margin: 12px 0;
    padding: 10px 20px;
  }
}

6. 特殊效果

悬停效果

li {
  line-height: 1.6;
  margin: 5px 0;
  padding: 10px 15px;
  transition: all 0.3s ease;
  border-radius: 4px;
}

li:hover {
  background-color: #e3f2fd;
  padding-left: 20px;      /* 悬停时增加左内边距 */
  margin: 8px 0 8px 4px;   /* 悬停时微调外边距 */
}

斑马纹效果

li {
  line-height: 1.7;
  margin: 0;
  padding: 12px 15px;
}

li:nth-child(odd) {
  background-color: #f8f9fa;
}

li:nth-child(even) {
  background-color: #ffffff;
}

7. 解决常见问题

问题1：项目符号/数字与文字对齐

li {
  line-height: 1.6;
  padding-left: 1.5em;      /* 为项目符号留空间 */
  text-indent: -1.5em;      /* 悬挂缩进 */
}

问题2：去除默认样式后的间距

ul, ol {
  margin: 0;
  padding: 0;
}

li {
  list-style: none;         /* 移除项目符号 */
  line-height: 1.8;
  margin: 10px 0;
  padding-left: 20px;       /* 自定义缩进 */
  position: relative;
}

li::before {
  content: "•";             /* 自定义项目符号 */
  position: absolute;
  left: 0;
  color: #3498db;
}

8. 最佳实践推荐

/* 推荐的基础样式 */
li {
  /* 行高控制在 1.5-1.8 之间 */
  line-height: 1.6;
  
  /* 垂直外边距 8-12px */
  margin: 10px 0;
  
  /* 内边距让内容有呼吸空间 */
  padding: 8px 12px;
  
  /* 可选：添加微妙的背景变化 */
  background-color: #fafafa;
  border-radius: 4px;
  
  /* 确保文字可读性 */
  font-size: 16px;
  color: #333;
}

/* 列表容器样式 */
ul, ol {
  margin: 20px 0;
  padding-left: 24px;       /* 为项目符号留足够空间 */
}

总结

控制 <li> 行边距的关键属性：

1. line-height：控制文字行高（最重要）
2. margin：控制列表项之间的间距
3. padding：控制内容与边界的间距
4. 组合使用：通常三者结合以达到最佳效果

建议从 line-height: 1.6 和 margin: 8px 0 开始，根据设计需求调整。