外边距
Margin
中级通用外边距（Margin）是 CSS 盒子边框外侧的空间，用来调整元素与周围元素之间的距离。比如后台页面里的筛选栏和结果表格挨得太近，你可以给其中一个元素设置外边距，让两块内容分开。
你可能会说：「筛选栏和下面的表格贴得太近，帮我留点距离，但别把筛选栏内部撑大。」
动手看看后台订单筛选区
筛选栏
状态：全部
搜索订单
订单结果
订单 #1001
订单 #1002
订单 #1003
外边距边框内边距内容
筛选栏的下外边距留在边框外，让它和订单结果分开；内边距则留在边框内，隔开筛选内容和边框。
要点外边距怎样影响页面上的距离？
- 1
空间留在元素边框之外
你给卡片设置外边距，增加的是卡片边框到周围元素的距离；卡片里的文字离边框多远，不由它控制。这样区分，和 AI 描述需求时就能说清是「卡片之间太挤」，还是「卡片里面太挤」。
- 2
四个方向可以分别调整
外边距可以设置上、右、下、左四个方向。比如你只想拉开页面标题与下方表单的距离，可以调整标题的下外边距，不必让标题左右也跟着移动。
- 3
相邻外边距未必直接相加
在普通文档流中，两个块级元素相邻的上下外边距可能发生折叠，实际距离不一定是两者数值之和。所以你看到间距比预想的小，先检查布局方式和外边距；弹性布局、网格布局中的项目不会这样折叠。
- 4
自动外边距也能参与布局
一个有明确宽度的块级元素，如果左右外边距都设为 auto，通常可以在可用空间里水平居中。比如让登录表单保持固定最大宽度并居中，就可以考虑这种做法。
容易混淆的地方
外边距管的是元素边框外的空间；内边距管的是内容与边框之间的空间。你想让卡片里的文字别贴边，用内边距；想让整张卡片远离旁边的卡片，才看外边距。如果是一组由容器统一排列的卡片，想控制每张卡片之间相同的距离，也可以用布局容器的 gap。
什么时候用
适合用
- 后台页面的筛选栏与结果表格挨得太近，你想拉开这两个区域，又不改变它们各自的内部空间。
- 登录页有一块限定宽度的表单，你想通过左右自动外边距，让它在可用空间中水平居中。
不适合用
- 卡片里的标题贴着卡片边框时，问题在卡片内部；用内边距给文字留空间更合适。
- 商品列表的所有卡片都需要统一的行列间隔时，让网格或弹性布局容器用 gap 管理更方便。
- 悬浮帮助按钮需要固定在视口角落时，先用定位确定它的位置；外边距不是固定到视口的方案。
练一练选一个答案，看看解释
你做了一个数据看板：统计卡片内部的文字位置正好，但卡片与下方图表贴得太近。你会先让 AI 改哪里？
让 AI 帮你做复制给 AI Agent 直接用
请检查数据看板中统计卡片与下方图表的间距。卡片内部留白已经合适，请调整两块区域之间的外边距，不要靠增加卡片内边距或绝对定位实现；同时检查不同屏宽下是否仍有足够间隔。