调来调去还是别扭，通常不是眼光问题，而是没有一套一致的"参照系"。每个间距都是独立拍脑袋决定的，相互之间没有倍数关系，视觉上就会感觉"乱"。
看起来不对 → 加一点 → 还是不对 → 再加 → 调回去 → 循环。没有基准，每次都是猜。
先定一套间距单位系统 → 所有数值都是这个单位的倍数 → 视觉上自然有节奏感，有呼吸感。
核心规则：所有间距都是 8 的倍数。4, 8, 16, 24, 32, 48, 64, 80, 96, 120…
← 微观间距（元素内部） ————————————————————————— 宏观间距（大模块之间） →
| 数值 | 用途 | 例子 |
|---|---|---|
4px |
图标与文字的间距、徽章内边距 | icon 和 label 之间 |
8px |
紧密关联元素之间 | 标题和副标题之间、按钮文字内边距 |
16px |
同一内容块内的段落间距 | 段落与段落之间、列表项之间 |
24px |
卡片内边距、小组件内部分区 | 卡片的 padding、表单行间距 |
32px |
内容区块内的子模块间距 | Features 里每个 Feature 的底部间距 |
48px |
页面中等模块的 padding-top/bottom | 中等 section 的上下内边距 |
64px |
大模块的 section padding | 普通 section 的上下内边距（桌面端常用） |
80–120px |
Hero 区、大型 section 的呼吸空间 | Hero padding-top/bottom、页面底部留白 |
16 开始往上试。觉得太挤就翻倍到 32，还挤就 48。永远不要用 15、22、37 这种非8倍数的随机值。
页面上每一行文字都应该有明确的"级别"，读者扫视时能立刻分辨主次。层级不清晰是外贸网站最常见的问题之一。
| 层级 | 字号范围 | 字重 | 颜色处理 | 行高 |
|---|---|---|---|---|
| H1 主标题 | 48–72px | 700–800 | 纯白 / 品牌色 | 1.1–1.2 |
| H2 区块标题 | 32–44px | 700 | 纯白 / 近白 | 1.2–1.3 |
| H3 子标题 | 20–26px | 600 | 浅灰白 | 1.3–1.4 |
| 副标题/引言 | 17–20px | 400 | 中灰（60%白） | 1.6–1.7 |
| 正文 | 15–16px | 400 | 中深灰（50%白） | 1.7–1.9 |
| 辅助/标签 | 12–13px | 400–500 | 深灰（35%白） | 1.5 |
标题下方的副标题间距：H1 和副标题之间通常用 12–16px，它们是一组，要"夹"在一起。副标题和按钮之间用 32–40px，代表"内容结束，行动开始"。
网页排版有两种截然不同的间距：Section 之间的距离（大模块间距）和 Section 自身的内边距（呼吸空间）。它们的数量级完全不同，必须分开处理。
给整个模块上下留白，让内容不贴边。
桌面端典型值：64–100px
Hero 区：80–120px
小模块（CTA条）：48–64px
移动端减半：40–60px
现代网站大多用背景色变化来区分模块，Section 之间 margin 为 0。
如果需要明确间距，用 16–32px 即可，因为背景色已经做了视觉分隔。
绝对不要 120px 的 margin。
Section 内部的层次间距（从上到下的节奏）：
多列布局用 CSS Grid 的 gap 属性控制。gap 包括两个方向：column-gap（左右） 和 row-gap（上下）。
适合：Features、优势展示、证书展示
适合：数据统计、合作客户logo、小型参数列表
| 布局类型 | 推荐 gap | 备注 |
|---|---|---|
| 两列图文（大块） | 48–80px | 图片和文字之间需要足够呼吸 |
| 三列卡片 | 24–32px | 最常见布局，24px 是最舒适的 |
| 四列图标/数字 | 16–24px | 内容简单，间距可以小 |
| 产品图片网格 | 16–20px | 电商风格，紧凑 |
| FAQ 列表 | 12–16px | 纵向 gap，row-gap |
24–32px。卡片内部的元素间距（图标 → 标题 → 文字 → 按钮）按照从上到下：图标到标题 16px，标题到正文 8px，正文到按钮 20–24px。
三列卡片 gap 设 8px，卡片挤在一起，失去独立感。
或者 gap 设 60px，卡片之间像三个孤立的岛，失去组合感。
三列卡片 gap: 24px 是黄金值。
卡片之间既有分隔感，又有"一组"的整体感，视觉上和谐。
关于对齐方式：多列卡片通常用 align-items: stretch（等高）或 align-items: start（各自高度）。外贸卡片建议用 stretch，让一排卡片等高，看起来更整齐专业。
以下数值适用于桌面端（1200–1400px 宽度）。移动端通常将 padding 减少 30–50%，gap 缩减到 16px 左右。
| section padding-top/bottom | 100–140px（有导航的情况下 top 还要加 60–80px） |
| H1 标题字号 | 52–72px，字重 700–800 |
| H1 → 副标题间距 | 16–20px（它们是一组） |
| 副标题 → 按钮间距 | 32–40px |
| 主按钮 + 次级按钮间距 | 12–16px |
| Hero 文字区最大宽度 | 560–680px（不要让标题一行太长） |
| section padding-top/bottom | 80–100px |
| H2 标题字号 | 36–44px |
| H2 → 副标题间距 | 12–16px |
| 副标题 → 卡片网格间距 | 48–56px |
| 三列卡片 gap | 24px |
| 卡片内边距 | 28–32px |
| 卡片内：图标 → H3 | 16–20px |
| 卡片内：H3 → 正文 | 8–12px |
| section padding-top/bottom | 80–100px |
| 图片列和文字列 gap | 60–80px |
| 文字列内：H2 → 正文 | 20–24px |
| 正文段落间距 | 16px |
| 正文 → 按钮 | 32px |
| 数字统计行（如有）行内 gap | 32–48px |
| section padding-top/bottom | 64–80px |
| 标题字号 | 32–40px |
| 标题 → 按钮间距 | 24–32px |
| 按钮高度 | 48–56px（不要太矮） |
| 按钮 padding-left/right | 28–40px |
| footer padding-top | 64–80px |
| footer padding-bottom | 40–48px |
| 各列 gap | 40–60px |
| 列内标题 → 链接列表间距 | 16–20px |
| 链接列表行间距 | 10–12px |
| 版权栏 margin-top | 40–48px（用细线分隔） |
| 检查项 | 标准 | 常见问题 |
|---|---|---|
| 间距数值 | 所有 padding/gap/margin 都是 8 的倍数 | 混入了 15px、22px 等随机数值 |
| Section 呼吸感 | 每个 section 上下 padding ≥ 64px | 内容贴近 section 边缘，拥挤感 |
| 标题层级 | H1 > H2 > H3 字号差距明显（≥ 6px） | H2 和 H3 几乎一样大，无法区分 |
| 关联元素分组 | 标题和副标题间距 ≤ 16px，它们是一组 | 标题和副标题离得太远，像两个独立元素 |
| 大跳跃 | 标题组 → 卡片/内容 ≥ 40px，体现层次切换 | 所有元素间距相同，页面平淡无节奏 |
| 正文行高 | 正文 line-height ≥ 1.7 | 行高 1.2–1.4，文字拥挤难读 |
| 段落宽度 | 正文最大宽度 640–720px，每行 60–80 字符 | 正文跨满整个 1200px 宽度，一行太长难读 |
| 卡片等高 | 同排卡片高度一致（align-items: stretch） | 各卡片高度不一，参差不齐 |
| 按钮大小 | 主要 CTA 按钮高度 ≥ 48px，不要太小 | 按钮高度 32px，显得廉价 |
| 颜色对比度 | 正文文字与背景对比度 ≥ 4.5:1 | 灰色字在灰色背景上，可读性差 |
单独决定每个层级的字号，就会陷入"调来调去"的循环。正确做法是：定一个底部基准（正文字号），再定一个固定的比例系数，向上逐层相乘，所有层级的字号就都有了数学依据，天然协调。
常用比例系数及适用场景：
| 比例系数 | 音乐名称 | 层级差感 | 适合场景 |
|---|---|---|---|
1.25 |
Major Third | 温和，差距小 | 内容密集型页面、信息量大的 B2B 网站 |
1.333 |
Perfect Fourth | 均衡，主流选择 | 外贸网站首选，层级清晰但不夸张 |
1.414 |
Augmented Fourth | 鲜明，设计感强 | 品牌展示型网站、视觉冲击力强的 Hero 页 |
1.5 |
Perfect Fifth | 强烈，差距明显 | 纯展示型落地页、字级很少的单页官网 |
以外贸网站最常用的基准 15px + 比例 1.333为例，推导出的完整字号梯度：
36px 就行。取整更干净，Elementor / Gutenberg 里输入也方便。相邻层级的字号差只要 ≥ 4–6px，视觉上就有明确层级感。
行高（line-height）是字体排版里最容易被忽略、但影响最大的参数。很多人全站设一个固定行高，结果大标题行间距空旷、正文又过于拥挤，或者反过来。
核心规律：字号越大，行高系数越小。原因有两个：
字号越大，字体内部的上下空白（ascender/descender）的绝对像素值也越大，视觉上已经很"宽松"了。再给 1.7 的行高，行与行之间会空得像段落之间。
正文字号小，读者眼睛从行尾跳到下一行首时容易"丢行"。1.7–1.8 的行高提供足够的垂直间距，降低阅读疲劳。
行间距过大，字组松散，没有力量感
紧凑有力，视觉上是一个整体标题
行间距太窄，阅读时容易"看串行"
舒适，眼睛容易追行，阅读不累
行高系数参考表：
| 字号范围 | 推荐 line-height | 绝对行高（以 36px 为例） | 适用层级 |
|---|---|---|---|
48px+ | 1.0–1.1 | — | 超大 Hero 标题 |
36–47px | 1.1–1.2 | 36px × 1.15 = 41px | H1 主标题 |
28–35px | 1.2–1.3 | — | 大号 H2 |
22–27px | 1.25–1.35 | — | H2 区块标题 |
18–21px | 1.4–1.55 | — | H3 / 副标题 |
15–17px | 1.65–1.8 | — | 正文段落（主力区间） |
13–14px | 1.55–1.65 | — | 辅助说明文字 |
11–12px | 1.5 | — | 标签、注释、版权 |
段落间距（margin-bottom）和行高的关系：段落之间的间距通常设为当前字号的 1.0–1.5 倍。正文 15px，段落间距约 15–22px，取 16px（符合 8pt 系统）即可。不要用行高来撑段落间距——那样会让段落内的行间距也变大。
正文基准字号是整套排版系统的"锚点"，选了它，上面所有层级的字号都跟着定了。14px 和 16px 是最常被纠结的两个选项，它们的差别不只是 2px，而是整套体系的气质。
适合：信息密度高、参数多、表格多的工业品外贸网站。阅读距离较近的桌面端用户。
推导出的层级（×1.333）：
| H1 | 33px | 14 × 1.333³ |
| H2 | 25px | 14 × 1.333² |
| H3 | 19px | 14 × 1.333 |
| 副标题 | 16px | 介于H3和正文 |
| 正文 | 14px | 基准 |
| 辅助 | 12px | 14 ÷ 1.333 |
H1 只有 33px，气场相对弱，需要加粗或加宽字间距来补。
适合：品牌展示型、形象为主的外贸网站。阅读舒适度优先，移动端体验也更好。
推导出的层级（×1.333）：
| H1 | 38px | 16 × 1.333³ |
| H2 | 28px | 16 × 1.333² |
| H3 | 21px | 16 × 1.333 |
| 副标题 | 18–19px | 介于H3和正文 |
| 正文 | 16px | 基准 |
| 辅助 | 13px | 16 ÷ 1.333 |
H1 达到 38px，视觉气场足。整体更宽松，品牌感强。
字号与屏幕宽度的关系（响应式）：
| 断点 | 正文 | H1 | H2 | 备注 |
|---|---|---|---|---|
| 桌面 ≥ 1200px | 15–16px | 48–64px | 32–40px | 可以更大，视觉冲击力强 |
| 平板 768–1199px | 15px | 36–44px | 26–32px | 适当缩小，节省屏幕空间 |
| 手机 <768px | 15px | 28–36px | 22–26px | 正文不变，标题收缩最多 |
以下是三套完整预设，选一套按需套用。所有行高均使用无单位系数，在 Elementor / Gutenberg 中直接输入。
| 层级 | 字号 | 字重 | 行高 | 字色参考 | 使用场景 |
|---|---|---|---|---|---|
| Hero H1 | 48–60px | 700–800 | 1.1 | 纯白 #FFFFFF | Hero 区主标题（视觉需要更大，直接设大） |
| H1 | 35px | 700 | 1.15 | 纯白 | 普通页面主标题 |
| H2 | 26px | 700 | 1.25 | 近白 #E4E8F0 | 各 Section 区块标题 |
| H3 | 20px | 600 | 1.35 | 浅灰白 #C8D0E0 | 卡片标题、列表标题 |
| 副标题 | 17–18px | 400 | 1.55 | 中灰 #8892AA | H2 下方引言、Hero 副标题 |
| 正文 | 15px | 400 | 1.75 | 深灰 #6B778F | 所有正文段落 |
| 辅助 | 12–13px | 400 | 1.6 | 暗灰 #4A5568 | 标签、注释、版权、参数 |
| 层级 | 字号 | 字重 | 行高 |
|---|---|---|---|
| H1 | 33px | 700 | 1.15 |
| H2 | 25px | 700 | 1.25 |
| H3 | 19px | 600 | 1.35 |
| 副标题 | 16px | 400 | 1.6 |
| 正文 | 14px | 400 | 1.8 |
| 辅助 | 12px | 400 | 1.55 |
注：H1 气场略弱，建议配合大字间距（letter-spacing: 0.02em）或全大写标题来加强。
| 层级 | 字号 | 字重 | 行高 |
|---|---|---|---|
| H1 | 38px | 700 | 1.1 |
| H2 | 28px | 700 | 1.2 |
| H3 | 21px | 600 | 1.3 |
| 副标题 | 18–19px | 400 | 1.55 |
| 正文 | 16px | 400 | 1.7 |
| 辅助 | 13px | 400 | 1.55 |
其他字体排版细节参数：
| 参数 | 推荐值 | 说明 |
|---|---|---|
| 段落最大宽度 | 640–720px |
每行控制在 60–80 个字符，超过这个宽度阅读疲劳感明显增加 |
| 正文字间距 | 0 或 0.01em |
正文不需要调 letter-spacing，保持默认即可 |
| 标题字间距 | -0.01 ~ -0.03em |
大号标题（36px+）略微收紧字间距，看起来更专业紧凑 |
| 全大写标题字间距 | 0.08–0.12em |
全大写标签/标注必须加大字间距，否则字母之间太挤 |
| 段落间距 | 16px |
正文段落 margin-bottom，符合 8pt 系统，不用行高撑开段落 |
| 按钮文字字号 | 14–16px |
主 CTA 按钮用 15–16px，次级按钮可以 14px |
| 按钮文字字间距 | 0.02–0.04em |
按钮文字略微加字间距，可读性和质感都提升 |
| 导航菜单字号 | 14–15px |
字重 500，字间距 0.01–0.02em，比正文略细 |
| 表单输入框字号 | 15–16px |
低于 16px 在 iOS Safari 会触发自动放大，影响体验 |