For AI agents: the complete documentation index is available at https://a3s-lab.github.io/UI/llms.txt, the full documentation bundle is available at https://a3s-lab.github.io/UI/llms-full.txt, and this page is available as Markdown at https://a3s-lab.github.io/UI/foundations/spacing.md.
  • 简体中文
  • next
  • 间距

    间距系统以 4px 为基础单位。紧凑应用工具栏使用 4–12px 间距,内容与页面区域使用 16–32px 间距。

    Live previewHTML · CSS · JavaScript
    4pxspace-1
    8pxspace-2
    12pxspace-3
    16pxspace-4
    24pxspace-6
    32pxspace-8

    间距刻度

    步骤典型用途
    14px图标与标签之间的微间距
    28px相邻控件
    312px工具栏与字段间距
    416px卡片内边距与网格间距
    624px分区间距
    832px页面区域

    布局参数

    应用组件通过 CSS 变量公开连续值:

    变量默认值组件
    --app-shell-navigation-size15remApp Shell
    --settings-navigation-size14remSettings Layout
    --resource-grid-min12remResource Grid
    --resource-grid-gap1remResource Grid
    --split-pane-min-height18remSplit Pane
    --task-pane-width18remTask Pane
    --task-pane-min-width14remTask Pane

    优先调整这些参数,不要覆盖组件内部网格选择器。

    Office 密度契约

    A3S 视觉包采用与 A3S Office 相同的紧凑应用框架节奏。只有当整个产品确实需要不同密度时,才覆盖以下语义化变量:

    变量默认值使用位置
    --a3s-control-height2.25rem标准控件
    --a3s-control-height-sm1.75rem紧凑按钮与 Ribbon 命令
    --a3s-control-height-xs1.5rem微型控件与图标按钮
    --a3s-activity-rail-size2.875rem折叠 App Shell / Activity Bar
    --a3s-workspace-header-height3.125remWorkspace Header
    --a3s-toolbar-height2.6875rem独立 Toolbar 行
    --a3s-toolbar-control-height1.8125remToolbar 命令
    --a3s-ribbon-tabs-height2.25remRibbon 标签栏
    --a3s-ribbon-panel-height4.625remRibbon 命令区
    --a3s-status-height1.75remStatus Bar

    调整变量时保持 4px 基线,并在桌面与紧凑宽度下验证完整应用外壳。