使用 margin-block 可有效增加列表项间距，提升可读性；推荐 li { margin-block: 0.5em; } 或兼容写法 margin-bottom: 1rem;，结合 line-height: 1.6 调整行距，优化视觉体验。
列表项目间距太小会让内容难以阅读，尤其在网页排版中影响用户体验。通过合理设置CSS间距属性，可以有效改善这一问题。其中，margin-block 是一个现代且简洁的解决方案，专门用于控制块级方向上的外边距。
使用 margin-block 增加列表项间隙
margin-block 属性作用于元素的块级方向（即垂直方向，与书写模式有关），适用于 ul、ol 和 li 等列表元素。相比传统的 margin-top 和 margin-bottom，它更符合语义化布局理念。
示例代码：
li {
margin-block: 0.5em;
}
这会在每个列表项上下各添加 0.5em 的外边距，使行间距离更宽松，提升可读性。如果只想增加下间距，可以写成：
立即学习“前端免费学习笔记（深入）”；
li {
margin-block: 0 1em;
}
兼容传统写法：使用 margin
若需支持较老浏览器，直接使用 margin 更稳妥。为列表项设置底部外边距是常见做法：
- 只设 margin-bottom 避免首项顶部或末项底部多余空白
- 推荐使用 em 或 rem 单位以保证字体缩放时布局一致
li {
margin-bottom: 1rem;
}
配合 line-height 改善整体视觉节奏
除了外边距，line-height 也影响阅读舒适度。适当增大行高能让文字呼吸感更强：
ul, ol {
line-height: 1.6;
}
结合 margin-block 使用效果更佳，既保持行内紧凑，又拉开项目之间的界限。
基本上就这些。用 margin-block 处理列表间距简洁高效，适合现代开发场景。不复杂但容易忽略细节。
