Day 22 · Divider 分割线：分开内容，不抢注意

Divider 是一条轻量的分隔线，用来把列表、容器或页面里的内容分成更容易理解的组；Material Design 也把它定义为用于分组组件、建立层级的细线。1

这期记住一句话：它负责提示内容关系，不负责制造装饰感。

最容易混的是 Space 和 Border。Space 靠留白分组，关系已经清楚时不必再加线；Border 是容器边界，定义「这一块区域」；Divider 只在内容之间补一条轻量层级线。Ant Design 对 Divider 的说明也很直接：它是一条分隔不同内容的线，可用于文章分段，也可分隔表格操作列里的内联文本或链接。2

常见形态可以按场景记：Full-width 适合大段分区，Inset 适合列表内的相关项目，Vertical 适合大屏左右内容分隔，With text 常用于带标题的分段。Material Design 明确区分 full-width、inset 和 vertical divider 的使用方式，Material UI 也把 Divider 描述为一条轻量、不抢眼的线，用来分组元素并强化视觉层级。3

该用 Divider 的时候，通常是内容类型不同、交互区和非交互区需要分开，或列表层级需要更清楚。别用它来填空、装饰，或给每一行都画线；Material Design 也提醒，过多分割线会让界面显得杂乱。1

口诀：能留白，别画线。