用 margin 控制段落上下间距最有效，因浏览器默认给 p 添加 margin-top 和 margin-bottom（各约 1em），line-height 和 padding 不影响段落间距；推荐重置为 p { margin: 0.8em 0; }，配合 :first-child/:last-child 清除首尾冗余间距，优先使用 em/rem 单位，并在 flex 容器中用 gap 替代 margin 以避免外边距合并问题。
直接用 margin 控制段落上下间距最有效
HTML简历里段落之间“看起来太挤”或“空得离谱”，95% 是浏览器给 p 默认加了 margin-top 和 margin-bottom（各约 1em）导致的。你不需要动 line-height 或 padding，那只会让行内文字变松/紧，或者撑大盒子本身，跟段落间距无关。
常见错误包括：
- 只写
margin-top: 1.2em，结果连续两个p叠在一起时顶部空白翻倍 - 用
height或padding“硬拉高”段落，导致背景色溢出、打印错位、响应式下换行异常 - 在简历里塞空
<p></p>模拟空行——语义错误，打印时可能被读屏器误读，缩放后间距崩坏
推荐做法：
- 统一重置所有段落：
p { margin: 0.8em 0; }（0.8em比默认略紧凑，适合简历密度） - 若想首段顶着标题、末段贴着模块底部，补上：
.section p:first-child { margin-top: 0; } .section p:last-child { margin-bottom: 0; } - 用
em或rem，别用px——字体缩放时间距能同步变化，对可访问性友好
gap 在 Flex 容器中替代 margin 更干净
当你把多个 p 包进一个 section，且该容器设了 display: flex; flex-direction: column;，就可以用 gap 统一控制段落间隙，完全绕过外边距合并问题。
立即学习“前端免费学习笔记（深入）”；
比如工作经历模块常用这种结构：
.experience {
display: flex;
flex-direction: column;
gap: 1.4rem;
}
优势很明显：
- 不用再担心相邻
p的margin-bottom和margin-top合并成一个值 - 加新段落不需额外调样式，
gap自动生效 - 配合媒体查询动态调整更直观：
@media (max-width: 768px) { .experience { gap: 1rem; } }
注意点：
-
gap不兼容 IE，如果必须支持老浏览器，回退到margin方案即可 - 别在
div上乱加display: flex就为了用gap——简历里不是所有容器都需要弹性布局
line-height 只管段内行距，别让它背锅
简历里一段文字换两行（比如项目描述、技能列表），看着“挤”或“散”，其实是 line-height 没设好，不是段落间距的问题。它和 margin 是两条平行线，互不影响计算。
典型误操作：
- 把
line-height设成1想“压缩段落”，结果段内文字糊成一团，可读性暴跌 - 设
line-height: 24px后发现段与段之间距离没变——对，本来就不该变
合理设置参考：
- 正文段落：
p { line-height: 1.5; }（兼顾紧凑与可读） - 标题下方说明文字（如求职意向）：
.profile p { line-height: 1.4; } - 避免用无单位数值以外的写法，比如
line-height: 1.5em会引发嵌套继承混乱
打印 PDF 前必须检查的三个间距陷阱
简历最终常导出为 PDF，而浏览器打印预览对 CSS 的解析比页面渲染更保守。很多“看着挺好”的间距，一打印就错位。
最容易漏掉的三点：
-
margin在打印时可能被截断或压缩，尤其当内容超出 A4 宽度（比如没设max-width） - 用了
flex+gap的模块，在某些 PDF 导出工具（如 Chrome 打印）里表现正常，但在 Safari 或旧版 Edge 中可能塌陷 -
line-height和font-size混用单位（比如font-size: 16px+line-height: 1.6rem）会导致缩放后行高计算失准，打印时文字重叠
稳妥做法：
- 主容器加
max-width: 800px; margin: 0 auto;，防止宽屏下内容横向溢出 - 打印样式里强制重置：
@media print { p { margin: 0.7em 0 !important; } } - 所有字号和行高统一用
rem，根元素font-size设为16px（方便换算）
真正卡住人的不是怎么设间距，而是调试时忘了切换到打印预览模式看效果——很多“奇怪的空白”只在那里出现。
