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

版面里「空着的地方」并非一种东西。元素之外、元素之内、列与列之间、行与行之间、字与字之间…… 每一处留白都有专名，也对应不同的 CSS 属性。下面这张图把九个名字汇在一处，本页把它们逐个做成可观察的 demo——margin / padding 还能拖动滑块实时看变化。

为什么要把「空白」拆成九个名字，而不笼统称作 spacing？因为同样一句「这里松一松」，在 CSS 里往往由完全不同的属性实现，改动的层级与副作用也各不相同。举个常见场景——想让一个按钮看起来更宽松：给它加 padding，是让按钮自身变大、文字离边框更远、连点击区一起放大；给它加 margin，按钮大小纹丝不动，只是把它和周围元素拉开——两者都让画面「松了」，落到代码却是两回事。其余几种同理：margin 还会与相邻元素折叠（上下相邻取较大值而非相加）、gap 既不折叠也不计入盒子尺寸、line-height 调的是文字行内而非盒子。把每一处留白对应到盒模型里确定的一层、确定的属性，设计意图才能无歧义地落到代码——否则「这里再松一点」既可能指 margin，也可能指 line-height，沟通与实现都会走样。

1 · 把它们放在一起看

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