外边距Margin
样式与布局基础控制元素与周围内容之间的距离
先知道
外边距位于元素边框之外，用来拉开它和其他内容的距离。它不带背景；普通块元素的上下外边距有时会合并，遇到距离不符合预期时要结合父级布局一起检查。
卡片 A24卡片 B
什么时候用
- 拉开模块间距：卡片之间、段落与标题之间
- 水平居中：定宽容器写 margin: 0 automargin: 0 auto，定宽块自动居中
- 统一只加一侧：比如都用 margin-bottom，间距好维护统一用 margin-bottom，间距只朝一个方向
- 最后 1~2px 的微调：图标和文字差一点点对不齐收藏
什么时候不用
- 上下两个 margin 相遇会塌陷合并成较大的那个，别当加法算块 A · margin-bottom: 20↕ 合并成 20（不是 32）块 B · margin-top: 12
- 想让内容和边框之间留空 → 那是 内边距 Padding 的活margin ↔ 拉开外部距离padding ↔ 增加内部留白内容
- 滥用负 margin 硬拉布局，后人根本看不懂负 margin 硬拉上来
- 塞空 div 加 margin 撑距离 → 交给 间距 Space 的间距体系空 div，专门用来撑距离
组成结构 · Anatomy
内容
1外边距Margin元素和别人之间的距离，完全透明
2边框Border元素的边界，出了它就是 margin 的地盘
3内边距Padding内容和边框之间，带着背景色
4内容Content文字、图片真正待的地方
常见变体 · Variants
四边相同16px
margin: 16px
四周都要均匀留空时用
单边margin-bottom
标题正文
段落、字段只向下留距离
水平居中0 auto
auto
定宽容器在页面里居中
负外边距Negative
封面图标题条
微调对齐或故意叠一点层次
典型使用场景
卡片之间的间隔
本周订单+12%
1,284
↕
margin-bottom: 16px
最近动态
小狐狸 评论了「首页改版」
段落与标题的距离
v2.4 更新日志
margin-top: 8px
新增深色模式与组件搜索，修复了 12 个已知问题。
margin-top: 24px，新章节离远一点
v2.3 更新日志
定宽容器水平居中
登录账号
定宽卡片写 margin: 0 auto，两侧自动均分剩余空间
图标的 1px 微调
★收藏
✕ 图标高出 2px，没对齐
★收藏
✓ margin-top: 2px 微调后对齐