左右两列边距相等的本质是让双栏容器在父级中水平居中，而非给子列设margin；正确做法是容器设width/max-width配合margin: 0 auto，Grid/Flex中用gap控制列间距，打印时需@media print单独声明。
左右两列边距相等，本质不是“给两列分别设 margin”，而是让整个双栏容器在父级中水平居中，且左右留白对称——这靠的是容器外的 margin，不是子列内部的 margin。
用 margin: 0 auto 居中容器，而非给左右列加 margin
常见错误是给 .sidebar 和 .content 各自加 margin-left 或 margin-right，结果导致列宽计算错乱、响应式失效、打印时偏移。正确做法是把双栏整体当一个块，用自动外边距居中：
-
.resume { width: 1200px; margin: 0 auto; }—— 容器定宽 + 水平居中，左右留白自然相等 - 若需响应式，改用
max-width: 1200px替代width，避免小屏下横向滚动 - 别在 Grid/Flex 子项上设
margin模拟边距，那会破坏列比例（比如grid-template-columns: 30% 70%被 margin 挤变形）
Grid 布局中用 gap 控制列间间距，不是 margin
gap 是 Grid/Flex 的原生列/行间隔控制属性，它不参与宽度计算，也不会触发外边距合并，比手动给子元素加 margin 可靠得多：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
-
.resume { display: grid; grid-template-columns: 30% 70%; gap: 2rem; }——gap只作用于列之间，不影响左右外边距 - 若想加大左右留白，应调外层容器的
margin，而不是把gap设成负值或滥用padding - 注意：IE11 不支持
gap，如需兼容，得用padding模拟，但必须同步调整子列flex-basis或width避免溢出
Flexbox 下避免 justify-content: space-between 误用
有人试图用 justify-content: space-between 让左右两列“撑开”，以为这样两边空白就相等——实际会导致中间空隙不可控，且小屏下容易错位：
立即学习“前端免费学习笔记（深入）”；
- 该属性只在主轴有剩余空间时生效；若两列总宽 = 容器宽，
space-between等同于flex-start - 真正要左右留白相等，仍应回到外层容器的
margin: 0 auto+max-width组合 - 如果容器本身没设宽，
justify-content对“边距相等”毫无意义——它管的是内容分布，不是容器定位
最容易被忽略的一点：打印样式里 margin: 0 auto 有时会被浏览器重置，尤其是 PDF 导出工具（如 Puppeteer）默认忽略非显式 @media print 规则。需要单独加 @media print { .resume { margin: 0 auto !important; } } 才能确保纸张左右边距一致。
