关键在于精准控制margin和padding的层级关系、单位选择与盒模型行为；需重置默认样式、统一使用rem/em构建垂直节奏、用grid实现两栏布局并明确间距责任归属。
用纯 HTML + CSS 制作带精细间距的简历，关键不在 HTML 结构有多复杂，而在于能否精准控制 margin 和 padding 的层级关系、单位选择与盒模型行为。默认浏览器样式和行内元素的基线对齐会悄悄破坏你想要的“精细感”，必须主动干预。
用 rem 或 em 替代 px 控制垂直节奏
像素值（px）在响应式场景下僵硬，且难以形成视觉韵律；而 rem 以根字体大小为基准，em 以父元素为基准，更适合构建可预测的纵向间距系统。
- 把
html的font-size设为16px（或按需设为10px便于计算：1rem = 10px → 1.2rem = 12px） - 标题间用
margin-bottom: 1.5rem，段落间用margin-bottom: 1rem，列表项用margin-bottom: 0.75rem - 避免混用
px和rem在同一组间距中，否则比例关系会断裂 -
line-height也建议用无单位数值（如1.4），它不继承font-size单位，更稳定
清除 h1–h6 和 p 的默认外边距
浏览器对标题和段落自带 margin-top/margin-bottom，且各浏览器不一致（比如 Chrome 的 h2 默认是 0.83em，Firefox 是 0.75em）。不重置就谈不上“精细”。
- 统一写
h1, h2, h3, h4, h5, h6, p { margin: 0; }，再按需添加margin-bottom - 特别注意
h2后紧跟ul或div时，若没清空h2的margin-bottom，再给ul加margin-top会造成双倍空白 - 用开发者工具检查 computed styles，确认最终生效的是你写的值，而不是用户代理样式（user agent stylesheet）
用 display: grid 对齐左右栏，别靠 float 或 inline-block
传统简历常分“左侧个人信息 / 右侧经历”两栏，但 float 会触发 BFC 导致外边距塌陷，inline-block 受空白符影响，间距不可控。Grid 是目前最干净的解法。
- 容器设
display: grid; grid-template-columns: 220px 1fr;，左侧固定宽，右侧自适应 - 列间距用
column-gap: 2rem（不是margin），它专为网格列间留白设计，不会干扰子元素盒模型 - 如果某区块需要跨栏（如“技能”横贯全宽），加
grid-column: 1 / -1; - 避免给网格子项设
margin-right来模拟间隙——这会让布局依赖内容宽度，响应式时易错位
真正难的不是加多少空行，而是让每处间距有明确目的、可复现、不被其他规则覆盖。比如 section 的上下留白是否该由它自己控制，还是由它内部第一个/最后一个子元素承担？这种责任划分一旦模糊，微调就会变成连锁反应。多花两分钟想清楚“谁该负责哪段距离”，比反复调 margin 数值更省时间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
