17370845950

给列表项加分割线应使用 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; }

基本上就这些。核心是：边框负责“线”，内边距负责“空”，两者相加才是你看到的间隔。