很多新手做版式时本能地想"填满"，觉得空白是浪费。但真正成熟的设计恰恰相反——留白是版式里最主动、最有表达力的元素。它制造呼吸感、划分信息组、引导视线焦点，是连接内容与气质的桥梁。苹果、Airbnb 这类被公认"高级"的页面，无一不是把留白用到了极致。学会留白，你的页面会立刻从"挤"变成"透"。

一、留白的三大作用

留白在版式中承担三种核心功能，理解了它们，你就知道每一处空白该留多大、为什么留。

1. 呼吸感：降低视觉密度

人眼阅读需要节奏，密集的内容会让眼睛很快疲劳。留白在元素之间制造间隔，给眼睛"换气"的间隙。大标题与正文之间、段落与段落之间、图片与文字之间，都需要足够的空白来缓冲。一个简单的判断标准：眯眼看页面，如果感觉一片密不透风，就是留白不够。

2. 分组：用距离替代线条

格式塔心理学里的"亲密性原则"告诉我们：距离近的元素会被感知为一组。利用这一点，可以用留白直接划分信息组，而不需要画分割线。相关的元素靠得更近，无关的元素离得更远，这种基于距离的分组比用边框分隔更自然、更高级，也更符合人脑的认知方式。

3. 聚焦：留白即聚光灯

当一个元素周围有大量留白时，它会自然成为视觉焦点。这就是为什么重要内容、CTA 按钮、核心数据往往要单独留出空间。留白起到了聚光灯的作用——它把周围的信息密度降低，让主体脱颖而出。反过来，如果你想让某个元素不那么显眼，就把它塞进密集的区域里。

二、留白比例与节奏把控

留白的大小不是凭感觉的，它有规律可循。最常用的是"8px 间距系统"：所有间距取 8 的倍数（8、16、24、32、48、64……），偶尔用 4px 做微调。这套系统的好处是让间距之间形成比例关系，整体节奏统一，也方便团队协作。

不同位置的留白有明确的比例层次。页面级留白（section 之间）最大，通常 80~120px；模块级留白（标题与内容之间）次之，24~40px；元素级留白（按钮内边距、图标与文字之间）最小，8~16px。这个从大到小的递减，构成了版式的纵向节奏。

/* 8px 间距系统变量 */
:root {
  --space-xs: 8px;   /* 元素内紧凑间距 */
  --space-sm: 16px;  /* 元素间常规间距 */
  --space-md: 24px;  /* 模块内分组间距 */
  --space-lg: 40px;  /* 模块间间距 */
  --space-xl: 64px;  /* 区块间间距 */
  --space-2xl: 96px; /* 大区块间距 */
}

/* 纵向节奏：从大到小递减 */
.section      { padding: var(--space-2xl) 0; }
.module       { margin-bottom: var(--space-lg); }
.module h3    { margin-bottom: var(--space-md); }
.module p     { margin-bottom: var(--space-sm); }

三、padding 与 margin 的实战策略

实现留白靠的是 padding 和 margin 这两个属性，但它们的语义完全不同。padding 是内边距，属于元素自身的一部分，会撑大元素的背景区域；margin 是外边距，是元素与外部的距离，不会影响元素自身的背景。区分清楚这一点，是写出可控版式的前提。

卡片内部：用 padding

卡片、按钮、输入框这些"容器型"元素的内部留白，一律用 padding。因为内边距属于元素自身，背景色、边框会正确包裹内容，不会出现"背景贴着文字"的廉价感。

/* 卡片内边距：内容与边框的呼吸 */
.card {
  background: #fff;
  border-radius: 16px;
  padding: 28px 32px;  /* 上下 28，左右 32 */
}

/* 按钮内边距：点击区域与文字的呼吸 */
.btn {
  padding: 12px 28px;  /* 横向留白大于纵向，更舒展 */
  border-radius: 999px;
}

/* 输入框内边距：文字与边框的距离 */
.input {
  padding: 13px 16px;
  background: #F5F1E6;
}

元素之间：用 margin 或 gap

元素与元素之间的间距，传统做法用 margin，但 margin 存在"外边距合并"的坑——相邻块级元素的垂直 margin 会合并而不是叠加。更稳妥的现代方案是用 Flexbox 或 Grid 的 gap 属性，它没有合并问题，且对父子容器都生效。

/* 传统写法：用 margin 控制元素间距（注意合并） */
.article p {
  margin-bottom: 22px;
}
.article p:last-child {
  margin-bottom: 0;  /* 最后一项去掉，避免尾部多余空白 */
}

/* 现代写法：用 gap 一劳永逸 */
.card-stack {
  display: flex;
  flex-direction: column;
  gap: 22px;  /* 子项之间统一 22px，无需处理 last-child */
}

/* 网格布局的间距 */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 24px;  /* 行间距 30，列间距 24 */
}

四、实战案例：从挤到透的改造

来看一个真实场景。某落地页的"三特性区"原本这样写：卡片 padding 只有 12px，卡片之间用 margin 16px，section 上下 padding 30px。整体观感是"挤成一团"，特性之间没有分组感。改造思路是拉开三个层级的留白。

/* 改造前：间距过小，缺乏层次 */
.section-old  { padding: 30px 0; }
.card-old     { padding: 12px; margin: 0 8px; }

/* 改造后：三层留白拉开节奏 */
.section-new {
  padding: 96px 0;       /* 区块级：大留白，与上下区块分隔 */
}
.feature-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;             /* 模块级：卡片之间分组 */
}
.card-new {
  padding: 36px 30px;    /* 元素级：卡片内部呼吸 */
}
.card-new h4 {
  margin-bottom: 16px;   /* 标题与正文分组 */
}
.card-new p {
  margin-bottom: 0;      /* 末尾不留白 */
}

改造后，section 留白从 30px 拉到 96px，让整个特性区与页面其他部分有了明确的"呼吸间隔"；卡片间距用 gap 32px 统一管理，三张卡片既成组又独立；卡片内边距加大到 36×30px，内容不再贴边。同样的信息量，观感却从"廉价"变成了"高级"，关键就是三个层级的留白各归其位。

五、留白的克制

最后要提醒的是，留白也要克制。过度的留白会让页面显得空旷、信息密度过低，用户需要更多滚动才能获取内容，反而损害体验。判断留白是否合适的标准是：信息是否一眼可读、分组是否清晰、焦点是否突出。如果三者都满足，就不要再加白；如果某一项不达标，再针对性地调整对应层级的间距。留白是工具，不是目的——它的终极目标是让内容被更舒服地阅读。