空格（ ）属于文本内容，用于强制保留不可断行空格；margin属于css布局属性，用于控制元素间距离。混用会导致语义混乱与布局错乱，应严格区分内容与样式。
空格（ ）和 margin 完全不是一类东西：前者是 html 文本内容里的“不可断行字符”，后者是 CSS 控制布局的外边距属性。混用或误替会导致布局错乱、语义混乱、响应式失效。
什么时候该用 ，而不是 margin
只在需要「文本内强制保留一个视觉空格」时才用 ，比如：
- 姓名中间不能换行（如“张 三”）
- 单位与数字紧邻（如“100 px”防止被折到下一行）
- 按钮文字中插入微调间距（
，但不推荐——这是 hack）
⚠️ 注意： 是内容的一部分，会参与可访问性读取、seo 索引、复制粘贴；而 margin 是纯样式，不影响语义。
什么时候必须用 margin，不能靠空格凑
所有涉及「元素之间距离控制」的场景，都该用 margin：
立即学习“前端免费学习笔记（深入）”；
- 两个 块上下分离
- 导航菜单项之间的水平间距
- 表单控件与标签的垂直对齐留白
- 响应式中根据屏幕尺寸动态调整间隙（
@media配合margin）✅ 正确示例：
❌ 错误示例：
......margin的常见坑：嵌套、塌陷、行内元素限制这些不是“写法错”，而是盒模型行为导致的意外结果：
- 父容器没边框/内边距，子元素设
margin-top→ 外边距塌陷，实际作用在父容器上 - 相邻两个块级元素分别设
margin-bottom: 20px和margin-top: 15px→ 实际间距是20px（取最大值，非相加） - 对
这类行内元素设margin-top/bottom→ 无效（浏览器忽略），只能用margin-left/right或改用display: inline-block
解决塌陷最稳方案：
overflow: hidden或padding-top: 1px给父容器加个“触发层”。真正要记住的只有一条：空格属于内容，
margin属于布局。把空格当排版工具用，等于在 HTML 里写样式——短期能跑，长期维护必翻车。