HTML求职简历紧凑排版核心是语义化结构（用替代）、精准CSS控制（font-size与line-height成对设为12px/1.15）、禁用、清除默认margin、打印时用@page{margin:0}消除页边距。
HTML 制作紧凑型个人求职简历，核心不是“用 HTML 写得像 Word”，而是利用语义化结构 + 精准 CSS 控制流、间距和换行，让内容在单页（A4 尺寸）内自然收束，不靠强行缩放或隐藏信息。
用 <section></section> 而不是 <div> 组织模块
<p>语义标签本身不压缩体积，但能帮你理清层级，避免后期为“某一块怎么总多出 24px 间距”反复查 <code>margin。浏览器对 <section></section> 默认无额外 margin，而 <div> 容易被误加全局样式干扰。
<ul>
<li>每个模块（如“教育背景”“项目经历”）用一个 <code><section></section> 包裹，内部用 <h3></h3> 做小标题，不用 <h2></h2> 或 <h4></h4> —— 层级越统一，CSS 重置越省事
<table> 排版：它会强制单元格撑开，哪怕内容只有两个字，也很难压窄列宽
<li>时间、公司名、职位这些并列短文本，优先用 <code><span></span> + display: inline-block 控制宽度，比浮动或 Flex 更可控
font-size 和 line-height 必须成对调
只改 font-size: 12px 不够，浏览器默认 line-height: normal（约 1.2）仍会让行距发虚。紧凑简历的行高必须显式设为 1.15 或 1.2，且所有段落、列表、标题保持一致。
- 全局基础设置建议：
body { font-size: 12px; line-height: 1.15; } -
<ul></ul>和<p></p>的margin全部清零：margin: 0;，靠padding-bottom: 4px控制条目间距 - 中文标点（尤其是顿号、逗号）后不加空格，否则会多占一个字符位——这点在 12px 下特别明显
打印时内容溢出？先关掉 @media print 里的 margin
Chrome/Firefox 打印预览默认给页面加 0.39in 页边距，这会让本已紧凑的简历左右被切掉一栏。不靠 JS 或 PDF 导出，直接用 CSS 干掉：
立即学习“前端免费学习笔记（深入）”；
@@media print {
@page {
margin: 0;
}
body {
margin: 0;
padding: 0;
}
}
- 注意是
@page { margin: 0; }，不是body { margin: 0; }—— 后者管不了物理纸张边界 - 如果用了
rem单位，确保根字体没在@media print里被重设（比如某些 UI 框架会把html设成10px） - 打印前务必在 DevTools → Rendering → Emulate CSS media →
print下预览，别信“看起来差不多”
真正难的不是写完一页 HTML，而是删掉第三个项目经历后，第二项末尾的空白高度是否自动收紧——这取决于你有没有把 padding 和 line-height 当成整体来调，而不是单独抠某个 <p></p> 的 margin。
