F2.02.2page margin as bezel breathing room设计
外边距决定内容与屏幕边缘的呼吸
别名: 外边距 · margin · 页边 · inset
概念解释
**外边距（margin）**是内容块到屏幕物理边缘的那圈空。它让字和按钮成为「图」，把玻璃边框、圆角和系统手势条留在「底」上。正文贴着圆角排，字形会被切掉一块，也像贴在设备壳上；全出血的照片则可以顶到边——照片本来就是底的一部分。
手机上把外边距收成 0，失败首先是裁切和误触，其次才是「不好看」。桌面窗口把外边距放到 200 px，主栏会缩成邮票，那是呼吸变成了放逐。
机制
屏幕边缘是一条极强的视觉线，也是拇指的停靠处。内容一旦撞上这条线，就会和设备铬合金并：字不再是可读对象，按钮的可点区域还会掉进圆角盲区和边缘手势。外边距的工作是把内容图从设备底里抬出来。
它不管列与列之间的分离（那是槽），只管整块内容相对窗口或屏幕的框。因此同一套产品里，正文、控件要有外边距，而英雄图、地图、视频背景可以出血——两类对象对「边缘」的需求相反。把它们写成同一个 inset，要么图被留白勒出黑框，要么字被送到玻璃弧里。
边界
无边框的沉浸画布（绘图、地图导航、全屏视频控件隐藏时）外边距应接近 0，只给必要控件留安全区。分屏、自由缩放窗口里，外边距要跟窗口走，不能按手机那套 16 px 写死：窄窗口会把内容勒成细条，宽窗口又会在两侧堆出大块死空。
刘海和底部指示条会再吃掉一部分边缘。外边距是布局里的内容框，安全区是硬件挖空；两者叠加，不是互相替代。
怎么落地
- 把「可出血的底」和「必须离边的内容」分成两套 inset：背景铺满，文本与可点控件退进外边距。
- 按设备实测最小外边距：圆角半径、状态栏、底部手势条都要让正文让开，而不是只在设计稿上留 16 px。
- 验证：在目标机上打开一篇正文和一个全出血媒体页。正文的第一列字不能进入圆角扇形或被刘海挡住；媒体页的图像应铺到物理边。再用拇指沿边擦过：若擦到的是按钮而不是空白，外边距不够。