CSS – 实战 Spacing & Layout

前言

这篇想整理一下在网页开发中, Spacing (间距) 和 Layout 排版是如果被处理的.

Spacing 介绍

东西密密麻麻会给人一种很恐怖的感觉. 只要加上一点空间 (间距), 整体感觉立马就会变好很多.

在网页开发中, padding, margin, gap, line-height 是最常用来做间距的. 它们各有特点, 也有重叠的部分, 所以最好有一个 best practice 不要乱用一通.

Padding

padding 是内间距, 用来给 parent child 制造空间.

padding 可以替代 margin (Figma 就没用 margin), 但是 padding 不能被 margin, gap 替代. 所以一般不会用错.

例子1: botton padding

例子 2 : viewport padding, header padding, content padding

绿色的部分都是 padding

Padding + negetive margin

上面这几个 nav link 需要间距. 最合适是用 padding 来实现. 因为要点击嘛. padding 空间会比较大.

gap 和 margin 的区域不属于内容也就无法被点击. 这也是 padding 和 gap, margin 很大的区别.

但有些场景则相反, 比如需要 background-color 的情况下, 用 padding 就不行了, 因为它是内容的一部分也会有 background-color 这样就看不到间距了.

注意: 用 padding 做间距会有 first element 和 last element 额外空间的 feel. 因为 padding 是不会 collapse 的, 所以需要配上 negetive margin 来 "帮" 它 collapse.

这个在管理上会有小扣分.

Margin

padding 是 parent child, margin 是 sibling

margin 的出场率会比 padding 少, 大部分情况还会被 gap 替代, 所以对我来说 margin 是比较冷门的.

中间的 slash 就用了 margin inline.

橙色部分就是 margin-top

橙色部分就是 margin-bottom

margin-top vs margin-bottom

有时候会发现, margin-top, margin-bottom 是可以互换的, 毕竟都是让 2 个 sibling element 分开. 给其中任何一个都是可以达到同一效果的.

但是通常我会使用 margin-top 因为这个是赋予在第 2 个 element 的, 因为有了这第 2 个 element 才会需要空间, 所以职责给它是合理的.

我只会对 title 使用 margin-bottom, 因为 title 通常会配上内容, 而让每一个内容都设置 margin-top 我觉得让 title 设置 margin-bottom 会跟简单直观一些.

总之不要纠结太多, 大部分情况 margin-top 是对的, 如果你觉得有个地方 margin-bottom 更好, 那么就用呗.

margin collapse

当两个 element 的 margin-bottom 遇上 margin-top 时, 它会形成重叠, 比如:

element A 有 margin-bottom 30px

element B 有 margin-top 50px

最终它们的间距时 50px 而不是 80px. (因为 margin 的表达是 A element 要和下面的 element 保持 30px, 而 50px 间距已经达到目的了)

gap

紫色的都是 gap

gap 也是处理 sibling 间距的. 绝大多数的情况下, gap 可以取代 margin.

我也鼓励这样做, 因为它比较直观.

1. 如果是多个 element 要做间距, 而且间距刚好相同, 那么 gap 会很好, (对比 margin 需要搞 n + 2 margin-top)

2. 如果只有 2 个 element 要做间距, 尽可能用 gap, 哪怕需要额外加 Flex, Grid 属性 (如果要加 wrapper element 就不要了)

3. 如果有多个 element 间距不同, 用 margin-top, 也可能配上 gap 一起用.

line-height

line-height 是 paragraph 行的间距.

line-height 一般用的是 percentage. 不同字体默认是不一样的, 通常在 1.2 左右.

也就是说 16px 的字, 高度是 16 x 1.2 = 19.2

2 点要注意:

当 paragraph 有 multiple line 的时候, 1.5 的 line-height 通常会更好一些

当只有 single line heading 1-6 的时候, line-height 1.0 通常会好一些. 因为字越大 line-height 越大.