跳到主要内容

样式与 CSS · 视觉设计

留白

Whitespace

也叫:负空间、空白、呼吸感、Negative Space

页面上刻意留出的空白区域,用来分隔内容、突出重点,让界面看起来不拥挤、更容易阅读。

示例

详细解释

留白不是浪费空间,而是设计的一部分。元素之间、区块之间、文字周围的空白,帮用户分辨哪些内容是一组、哪里是重点。同样的内容,间距太小会显得拥挤、廉价、难读;适当加大间距,界面马上清爽很多。

实用原则是「组内紧、组间松」:标题和它下面的正文靠近一点,不同区块之间拉开距离,用户不看分割线也能看出分组。间距最好用一套固定数值,比如 4、8、12、16、24、32、48,不要随手写 13px、17px。

AI 生成的界面常见问题是太挤,或者间距忽大忽小。与其说「好看一点」,不如具体说「区块之间 48px,卡片内边距 24px」。

开发者信息
术语 ID
style-whitespace
DOM 选择器
没有 DOM 线索,这个概念不在页面上直接识别。
优先级
1 · 同一层有多条命中时,优先级高的胜出
版本
v1 · 更新于 2026/09/29