设计与 CSS 里的留白，各自叫什么

版面里「空着的地方」并非一种东西。元素之外、元素之内、列与列之间、行与行之间、字与字之间，每一处留白都有专名，也对应不同的 CSS 属性。

为什么要把空白拆成九个名字，而不笼统称作 spacing？因为同样一句「松一松」，在 CSS 里往往由完全不同的属性实现，改动的层级与副作用也各不相同。以「让按钮看起来更宽松」为例：给它加 padding，是让按钮自身变大、文字离边框更远，连点击区一起放大；给它加 margin，按钮大小纹丝不动，只是把它和周围元素拉开。两者都让画面松了，落到代码却是两回事。

其余几种同理：margin 还会与相邻元素折叠（同一 BFC 内上下相邻时取较大值而非相加，flex 与 grid 的子项则不折叠）；gap 既不折叠，也不属于任何一个子项的盒子；line-height 调的是文字行内而非盒子。把每一处留白对应到盒模型里确定的一层、确定的属性，设计意图才能无歧义地落到代码——否则「再松一点」既可能指 margin，也可能指 line-height，沟通与实现都会走样。

1 · 四个层级

九个名字落在四个层级上：margin 与 padding 是单个盒子的内外，属 CSS 盒模型；gutter 与 row-gap 是盒子之间的横竖间隔，由 gap 统一表达；grid 与 safe-area 是整体版面的骨架与安全边界；line-height 与 letter-spacing 是文字内部的疏密。而 negative space（负空间）站在更高处，是对所有留白的统筹审美。分清它们，沟通和实现时才不会把「再多留点空」这句话译错成代码。