给列表项加分割线应使用 padding-bottom 与 border-bottom 协同控制间距，总间距 = padding-bottom + border-bottom-width；最后一项用 li:last-child { border-bottom: none; } 去除边框；避免 margin-bottom 防外边距合并；响应式可用 calc(0.5em + 1px) 弹性留白；务必设置 box-sizing: border-box 确保尺寸精准。
给列表项加分割线，用 border-bottom 最直接，但“精确控制间隔”关键不在边框本身，而在**行高、内边距和边框的协同计算**。
用 padding-bottom 配合 border-bottom 控制视觉间距
只靠 border-bottom 无法拉开文字和下一条之间的距离；真正留白靠的是 padding-bottom。边框画在内边距的底边，所以总间距 = padding-bottom + border-bottom-width。
- 想让文字底部到下一项文字顶部之间空 12px：设
padding-bottom: 10px+border-bottom: 2px solid #eee - 最后一项通常不需要分割线：用
li:last-child { border-bottom: none; }或li:not(:last-child)更稳妥
避免 margin-bottom 的常见陷阱
别用 margin-bottom 加分割线——它会把边框推远，导致间距不可控，还容易引发外边距合并（尤其是列表嵌套时）。
如果已用 margin，建议统一切换为 padding + border 组合，逻辑更清晰、更易维护。
立即学习“前端免费学习笔记（深入）”；
响应式场景下用 calc() 动态微调
当字体大小随屏幕变化时，固定像素的 padding 可能不协调。可用 calc() 让间距相对化：
-
padding-bottom: calc(0.5em + 1px);—— 基于当前字号弹性留白 -
border-bottom: 1px solid #ddd;—— 细线保持清晰，不随缩放变粗
用 box-sizing: border-box 保精度
确保列表项设置了 box-sizing: border-box（现代 CSS 重置中通常已包含）。这样 padding 和 border 都算在元素总高度内，不会意外撑开容器或破坏网格对齐。
没加的话，加上这句：li { box-sizing: border-box; }
基本上就这些。核心是：边框负责“线”，内边距负责“空”，两者相加才是你看到的间隔。
