布局

布局的尺度只有一把尺：4px 网格。间距、控件高度、字段宽度、面的内衬、断点全部锚在它上面，组件里没有第二套数。

间距阶梯

令牌	取值	预览	说明
--xh-space-0_5	2px		半阶补偿：图标基线、几何对齐
--xh-space-1	4px		贴在一起的：标签贴控件、说明贴控件、图标贴文字
--xh-space-1_5	6px		半阶补偿：紧凑控件
--xh-space-2	8px		同一组里的相邻项：控件内图标与文字、集合标题与集合
--xh-space-2_5	10px		半阶补偿
--xh-space-3	12px		控件的行内内衬（md）
--xh-space-4	16px		不同信息组之间
--xh-space-5	20px
--xh-space-6	24px		区块之间
--xh-space-7	28px
--xh-space-8	32px		页面级分段

规则：所有 padding、gap 与布局间距走令牌；2 / 6 / 10 只用于图标基线、紧凑控件与几何补偿，不出现 5 / 7 / 9 / 13 / 15 这类散值；信息关系越紧密间距越小，不同信息组至少提升一个档位。

面的内衬只走 --xh-surface-*（px-sm / md、py-sm / md、pad-xs … lg），页面分段走 --xh-section-py-*，布局组件的列隙走 --xh-layout-gap-xs … xl、列的最小宽走 --xh-layout-col-min-xs … lg。

控件高度与密度

密度	sm	md	lg
comfortable（缺省）	28px	32px	36px
compact	24px	28px	32px

• md 是缺省尺寸；同一 size 不随断点自动改变高度。
• 图标按钮的视觉盒遵循同一高度；粗指针命中区至少 44×44px，用伪元素扩展，不改布局盒。日历网格的格子首尾相接，外扩会压到相邻格：粗指针下行距与列宽下限加到 44，格子本身就是 44×44 的触摸盒，日期钮仍是 24 的圆。
• 尺寸档同时换行内内衬（--xh-control-px-sm / md / lg = 8 / 12 / 16px）、内部间隙（--xh-control-gap-* = 4 / 8 / 12px）、字号（--xh-control-font-*）与图标（16 / 18 / 20px）。按钮这类文字档动作控件的行内内衬宽一档：sm / md / lg = 12 / 16 / 20px。
• 密度（data-density="compact"）只收紧高度、内距与间隙，不缩字号和字形。
• PinInput 的格是字段外壳，边长取 --xh-control-h-*，与同一行里的字段等高。
• 浮在内容之上的圆钮（Carousel 翻页、回到底部等 floating 动作钮）走 --xh-control-box-sm / md / lg = 28 / 36 / 44px（紧凑 24 / 32 / 40px）；独立浮在页面一角的 FloatButton 与 BackTop 的 md 档取 --xh-control-float-md = 40px（紧凑 36px），sm / lg 仍取 box 档。
• 盛内容的圆（Avatar、带框 Icon）直径取 --xh-control-h-*，与同档控件等高；Steps 序号圆点是状态圆，取 --xh-marker-size-sm / md / lg = 24 / 28 / 32px（紧凑 20 / 24 / 28px），比同档控件矮一档。
• 导航行（SideNav 的分支与链接）比同档控件高一截：--xh-nav-row-h-sm / md / lg = 32 / 40 / 44px（紧凑 28 / 36 / 40px），整列扫读更松。
• 状态 chip（Tag）比同档控件矮一截：--xh-chip-h-sm / md / lg = 20 / 24 / 28px（紧凑 18 / 20 / 24px）。

字段的宽度

单行字段不传尺寸时一族同宽：根缺省 inline-size: var(--xh-control-w)（16rem），宽度不随内容走——选中一条很长的选项触发器也不变宽。另有一条底线 --xh-control-min-w（12rem）：字段被 flex / grid 容器压缩时收到这里为止，容器比底线还窄时收成容器宽，不越出去。放进表单字段（Field）时字段族控件铺满字段宽，跟着表单的列走；横排一行流的表单里字段按内容收，仍取缺省宽。

盒里与已选标签并排的输入框（标签输入、多选的组合框）另有一条 --xh-control-input-min-w（4rem）：标签再多也给打字留出这一截——标签输入的输入框换到下一行，多选组合框的标签先截断、再折进 +N。

例外只有登记过的几件：日期范围选择器起止两组按日的段位放不进 16rem，缺省按内容撑开；分格输入由格数与格宽定宽；对话输入条铺满宿主；表单字段（Field）里的控件铺满字段宽。槽名与放开方式见 皮肤与样式分层 · 输入类控件的缺省宽度与最小宽度。

侧栏的宽度

令牌	取值	说明
--xh-sider-w	13.75rem	展开
--xh-sider-collapsed-w	4rem	折叠成图标栏

页面侧栏的两档宽度只有这一处真源：Layout 的侧栏与 SideNav 缺省都读这两支令牌。改令牌，两件一起换宽；只改一处时写该组件的覆盖槽（--xh-layout-sider-w / --xh-layout-sider-collapsed-w、--xh-side-nav-w / --xh-side-nav-collapsed-w），槽压过令牌。SideNav 放进 Layout 的侧栏时，侧栏内衬缺省归零，导航正好铺满侧栏。

断点

令牌	取值	说明
--xh-breakpoint-sm	640px	手机横屏起
--xh-breakpoint-md	768px	平板；浮层里的多列面板在此以下改单列
--xh-breakpoint-lg	1024px	桌面；Layout 的 siderBreakpoint 常取这一档，以下折叠侧栏
--xh-breakpoint-xl	1280px	宽桌面

断点只用 min-width 自窄到宽依次接管，写了哪档就在哪档切换；只在窄档生效的规则写它的补集 not all and (min-width: …)，不写 max-width（它在断点值上与 min-width 同时成立），也不写区间写法 (width < …)（Safari 16.4 起才认）。媒体查询不改选择器权重。多数"窄处坏掉"的问题不靠断点解决：flex-wrap、min-inline-size: 0、overflow-wrap、把死地板改成能让步的 min(…, 100%)，这些规则在窄视口与窄容器（1280 宽屏里的 260px 侧栏）两种情形下同时成立。

布局组件

组件	管什么
Layout	页面骨架：页头、侧栏、内容、页脚；侧栏可折叠、可在断点以下改成覆盖层
Flex	一维排列，间隙走 --xh-layout-gap-*
Grid	二维栅格，列的最小宽走 --xh-layout-col-min-*
Masonry	瀑布流
Splitter / Resizable	可拖动分栏与可拖动尺寸
Separator	分隔线，缺省取 --xh-border-default 并自带留白（横线上下各 20px、竖线左右各 12px）
ScrollArea	组件内滚动面，自绘条或原生细条按 组件内滚动 归档

表单排布

Form 四种排布：vertical（缺省，纵向一列）、horizontal（标签左置两列，整表标签列宽由 --xh-form-label-w 统一对齐）、inline（横向一行流，放不下自动换行）、grid（等宽列网格，列数 1 – 4 逐断点声明，单个字段可跨列或占满整行）。字段标签与控件隔 --xh-space-2，说明与错误文案紧贴控件、占一行最小高 --xh-space-5 的辅助行；字段与字段之间走 --xh-form-gap（缺省 --xh-space-5），给错误文案留的那一行空着时就是项距、不再另留，说明是字、带说明的字段在说明下面照常留项距；inline 列距 --xh-form-inline-gap（缺省 --xh-space-6）、行距 --xh-form-inline-row-gap（缺省 --xh-space-2）。

浮层尺寸

锚定浮层的宽高走 --xh-overlay-*：面板最小宽 12rem、菜单最小宽 10rem、最大宽 sm / md / lg / xl = 16 / 20 / 24 / 48rem、菜单与候选列表最大高 20rem（紧凑 17rem）；Dialog 的 sheet 宽 sm / md / lg = 24 / 32 / 48rem，Drawer 宽 sm / md / lg = 16 / 20 / 28rem。锚定浮层同时接可用高度与可用宽度：视口放不下时先收自己，再翻面。

相关

• 形状与边界 · 字体
• 指南：皮肤与样式分层 · 浮层定位