6. 🌬️ 间距留白 Spacing ★☆☆☆☆

🌏 Web 网页规范

  • 间距标准: 8px 基础网格，弹性 Flexbox 自动流
  • 排版流: CSS 外边距合并 (Margin Collapse) 机制
  • 排布模式: 纵向流式内容排布，外层大 Padding 呼吸感
  • 响应变化: 百分比自适应与 Container Queries

📱 App 移动端规范

  • 间距标准: 4px / 8px 紧凑硬网格，约束式绝对对齐
  • 排版流: 无外边距合并概念，全由约束及 Gap 确定
  • 排布模式: 屏幕边缘严防误触，16dp / 20dp 安全边距
  • 响应变化: 基于比例约束或 Safe Area 内嵌填充

Web 8px 栅格步进与响应式流动留白

Web 8px Layout Grid & Fluid Negative Space

网页端间距设计同样基于 8px 的倍数步进（如 8, 16, 24, 32, 48px），利用 flex/grid 容器的 gap 和响应式单位实现宽屏留白的动态流动收缩。

App 物理物理热区与拇指触控间距安全区

App Thumb Hot Zones, Safety Margins & Tap Targets

移动端触控要求任何交互按钮必须拥有至少 44x44pt (iOS) / 48x48dp (Android) 的物理物理热区，并在边缘留出足够的安全边界防止手指误触。

LIVE PLAYGROUND: 亲密性间距微调与 8px 网格红线对齐验证 拉动滑块调节卡片间距，勾选网格层以直观观察对齐
https://web.meta-ui.edu/spacing
09:41
📶 🔋
💡
亲密性布局
间距为 16px-24px 时结构清晰，负空间透气。
🎨
视觉呼吸感
增加至 32px-48px 能创造出高端奢侈感。
📋 大模型统一 Prompt (LLM Prompt)