CSS技术问题：如何实现列表元素换行并调整元素间间距？

1. 解决样式优先级覆盖问题
   通过浏览器开发者工具（F12）查看.flowpaper-reflow-tocitem的计算样式，确认margin、padding是否被其他更高优先级的规则覆盖。如果是，给目标样式提升优先级：

.flowpaper-reflow-tocitem {
  position: relative;
  white-space: normal;
  margin: 8px 0 !important;
  padding: 4px 0 !important;
  line-height: 1.5;
}

2. 修正元素display类型
   如果.flowpaper-reflow-tocitem是inline或inline-block类型，垂直方向的margin、padding可能无法正常生效，改为块级元素即可：

.flowpaper-reflow-tocitem {
  position: relative;
  white-space: normal;
  display: block;
  margin: 8px 0;
  line-height: 1.6;
}

3. 排查父/子元素样式干扰
   检查列表父容器是否存在继承的line-height属性，或列表项内的子元素是否自带默认间距，针对性清除或调整：

/* 假设列表父容器类名为flowpaper-reflow-toccontainer，需根据实际情况调整 */
.flowpaper-reflow-toccontainer {
  line-height: normal;
}
/* 清除列表项内子元素的默认间距 */
.flowpaper-reflow-tocitem > * {
  margin: 0;
  padding: 0;
}

4. 用line-height精准控制行间距
   列表项内文本换行后的行间距由line-height控制，列表项之间的外部间距则用margin调整，比直接设置height更灵活：

.flowpaper-reflow-tocitem {
  position: relative;
  white-space: normal;
  line-height: 1.8; /* 数值越大，行内换行的间距越大 */
  margin-bottom: 10px; /* 控制列表项之间的外部间距 */
}

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