清除 body 默认 margin 是第一步，几乎所有浏览器都给 body 加约 8px 默认外边距，导致页面四周出现白边；必须写 body { margin: 0; padding: 0; }，避免用通配符 * 重置而破坏语义化元素的天然间距。

清除 body 默认 margin 是第一步

几乎所有浏览器都会给 body 加约 8px 的默认外边距，这是你看到简历四周“空一圈”的根本原因。不先清它，后面所有 margin 和 padding 都是叠在干扰值上，调不准也看不出效果。

必须写这句 CSS：

body {
  margin: 0;
  padding: 0;
}

别用通配符 * { margin: 0; padding: 0; } —— 它会干掉 h1、p 等元素的天然垂直节奏，导致段落挤成一团，反而更难读。

用容器 margin 控制整体留白，不是靠推 body

简历内容不该直接贴着视口边缘，但也不该靠给 body 加 margin 来“挪位置”。正确做法是套一层语义化容器（比如 <main></main> 或 <div class="resume">），然后单独控制它的外边距。<ul> <li> <code>margin: 24px auto;：上下留白 24px，左右自动居中（适用于定宽布局）

margin: 2rem 1.5rem;：用 rem 更适配字体缩放，小屏时可通过媒体查询收紧

避免 margin: auto; 单独写——没有 width 的块级元素，auto 水平居中无效

表格类简历结构要单独处理 table 外边距

如果用了 <table> 布局（比如老式信息表），它的边距和单元格间距常被混淆。记住：<code>border-spacing 只影响单元格之间，margin 才决定表格离页面边缘多远。

常见错误：

超级简历WonderCV

一款AI办公效率工具，主要用于免费求职简历模版下载制作，应届生职场人必备简历制作神器，适合需要提升相关任务效率的用户。

下载

• 只设 border="1" 却没设 margin → 表格顶到页面顶部
• 误用 cellpadding 当外边距 → 内容被撑开，但表格位置不动
• 嵌套在 <div> 里却忘了父容器也有 <code>padding → 实际留白翻倍

  稳妥写法：

  table {
    margin: 1.25rem auto;
    border-collapse: collapse;
  }
  /* 配合这个，才能让 border="1" 显示为单线 */

  打印 PDF 时边距错位，其实是 CSS @media 规则没生效

  浏览器打印预览和导出 PDF 时，会走 @media print 分支。如果你没写，就沿用屏幕样式，而屏幕样式里的 rem、vw 或 flex gap 在某些 PDF 引擎（尤其是 Chrome DevTools 导出）里解析异常，导致留白崩塌或文字截断。

  关键补丁：

  • 加一条强制重置：@media print { * { margin: 0 !important; padding: 0 !important; } }
  • 把关键容器宽度改成 width: 210mm;（A4 宽），而不是 800px 或 90vw
  • 禁用背景图和非系统字体：@media print { body { background: #fff; } * { font-family: "Segoe UI", "Helvetica", sans-serif !important; } }

  最易忽略的一点：Chrome 打印设置里的“边距”选项（最小/无/默认）会叠加在 CSS 之上。导出前务必手动选“无边距”，否则 CSS 写再准也没用。