Divider vs. Separator vs. Rule 分隔线：Divider、Separator 与 Rule web
The same thin line can mark a topic break, separate controls, or be decoration
同一条细线，可以是话题转折、控件分隔，也可以只是装饰
标本可交互 —— 点点看。Specimen is live — try it.
Anatomy — every part, named解剖 —— 每个部件的名字
-
1 Thematic break (horizontal rule)主题性分隔（Thematic break/水平标线）
<hr>“Above that line break” can mean a horizontal rule: an <hr> marking a real change of topic between sections of content.
“那条线上面”可能指水平标线：<hr>，标记内容区块之间真正的话题转换。
Prompt fragmentPrompt 片段a semantic thematic break using HTML <hr>: a horizontal rule between two content sections whose subject or scene changes
用 HTML <hr> 做语义化主题分隔：两个内容区块之间的水平标线，前后主题或场景发生转换
-
2 Semantic separator语义分隔符（Semantic separator）
role="separator"“A vertical line break between those sections” is a semantic separator when it divides distinct regions or groups of controls.
“区块之间的竖线”在划分不同区域或控件组时，就是语义分隔符。
Prompt fragmentPrompt 片段a structural separator with role="separator" between two groups of controls or interface regions, with aria-orientation="vertical" when it is vertical
两组控件或界面区域之间带 role="separator" 的结构分隔符，垂直时加 aria-orientation="vertical"
-
3 Decorative CSS border装饰性 CSS 边框（Decorative CSS border）
border-block-start“Maybe add a vertical line divider” can be only decoration; use a CSS border with no separator semantics when it conveys no structure.
“要不加条竖线”可能只是装饰；不传达结构时，用不带 separator 语义的 CSS border。
Prompt fragmentPrompt 片段a purely decorative divider drawn with a CSS border such as border-block-start or border-inline-start, with no <hr> element or separator role
纯装饰分隔线，用 CSS border 画，如 border-block-start 或 border-inline-start，不用 <hr> 元素，也不要 separator 角色
-
4 macOS divider and separator itemmacOS 的 Divider 与分隔菜单项（macOS divider and separator item）
Divider / NSMenuItem.separator()In macOS UI, SwiftUI calls the visual line Divider, while a line between menu command groups is an NSMenuItem separator item.
macOS 界面里，SwiftUI 把视觉分隔线叫 Divider，而菜单命令组之间的线是 NSMenuItem 的 separator item。
Prompt fragmentPrompt 片段the native macOS cousin: SwiftUI Divider between view regions, or NSMenuItem.separator() specifically between related groups of menu commands
macOS 原生亲戚：视图区域之间的 SwiftUI Divider，或专用于菜单命令分组之间的 NSMenuItem.separator()
Prompt — paste into your agentPrompt —— 直接粘贴给你的代理
Choose the correct Divider, Separator, or Rule: use HTML <hr> for a semantic thematic break in content, role="separator" for a structural boundary between groups of controls, and a CSS border such as border-block-start for a purely decorative line. On macOS, use SwiftUI Divider for a visual division or NSMenuItem.separator() between menu-item groups.
选对 Divider、Separator 或 Rule：内容中的语义性话题转折用 HTML <hr>；控件组之间的结构边界用 role="separator"；纯装饰的线用 CSS border，如 border-block-start。macOS 上，视觉分隔用 SwiftUI Divider，菜单项分组之间用 NSMenuItem.separator()。
Debug prompt — when it misbehaves调试 Prompt —— 当它不听话时
Debug my divider (hr, role=separator, border utilities). Rule out: the hairline doubling or vanishing on fractional zoom because 1px borders round differently; a decorative divider still announced by screen readers — decorative ones need aria-hidden, semantic ones role=separator; a flex parent stretching the divider when a fixed cross-size was intended; margin collapse eating the space around an hr. The symptom:
调试我的分隔线（hr、role=separator、border 工具类）。逐项排除：分数缩放级别下 1px 边框取整不同，细线变两条或消失；装饰性分隔线仍被屏幕阅读器念出来 —— 装饰的要 aria-hidden，语义的要 role=separator；flex 父级把想要固定交叉轴尺寸的分隔线拉伸；margin 折叠吃掉 hr 周围的空间。症状是：
In code代码里叫什么
| Framework框架 | Symbol符号 | Note说明 |
|---|---|---|
| HTML | <hr> | |
| ARIA | role="separator" | |
| CSS | border-block-start | decorative only纯装饰 |
| SwiftUI | Divider | |
| AppKit | NSMenuItem.separator() |