如何通过HTML/CSS统一Divi中嵌套列表的项间距？

现有CSS选择器匹配了所有层级的列表项，且未覆盖Divi默认给嵌套子列表、列表项、自动生成的段落标签设置的内置上下边距、行高规则，带子列表的父项下方间距会被子列表的边距、子项边距累加，最终出现子项越多间距越大的不一致问题。

删除原有自定义CSS，替换为以下代码：

/* 统一所有列表项基础间距，覆盖Divi默认边距 */
.bullet_list_spacing li {
  margin: 0 0 16px 0 !important;
  padding: 0 !important;
  line-height: 1.7;
}

/* 清除Divi自动给列表项内文本包裹p标签产生的默认边距 */
.bullet_list_spacing li p {
  margin: 0 !important;
  padding: 0 !important;
}

/* 嵌套子列表仅保留左缩进，清除所有上下多余边距 */
.bullet_list_spacing li ul {
  margin: 16px 0 0 0 !important;
  padding: 0 0 0 2em !important;
}

/* 清除所有层级最后一个列表项的下边距，避免多余空白 */
.bullet_list_spacing li:last-child {
  margin-bottom: 0 !important;
}

/* 清除最外层列表默认边距 */
.bullet_list_spacing > ul {
  margin: 0 !important;
  padding: 0 !important;
}

代码中16px为列表项之间的统一间距，2em为子列表的左缩进距离，1.7为文本行高，均可根据站点实际排版需求调整数值。

• 替换CSS后务必清除站点缓存、浏览器缓存后刷新页面，Divi的静态资源缓存会导致新样式无法即时加载
• 确认文本模块高级选项中填写的bullet_list_spacing类名无拼写错误，不要额外加.前缀或多余空格
• 不要在Divi文本编辑器的可视化界面手动给列表设置额外段间距、行间距，所有列表间距统一通过上述CSS控制，避免样式冲突

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