space 和 gap 都能用于让子元素间产生间距，但实现原理和适用范围不同，推荐用 gap，不要用space
| space-x / space-y | gap | |
|---|---|---|
| 适用范围 | 可用于任意容器 | 仅用于flex/grid 容器 |
| 实现原理 | space-x 是给第1至倒数第2个子元素添加 margin-right space-y 是给第1至倒数第2个子元素添加 margin-bottom |
父容器内部创建「空隙」 |
| 作用对象 | 子元素 | 父容器自己 |
| 换行布局 | ❌ 会出问题（间距加倍） | ✅ 完美支持 |
| 垂直+水平间距 | 需要同时写 space-x + space-y | 只写 gap 就够 |
| 嵌套影响 | 会影响深层子元素 | 只影响直接子元素 |
| 兼容性 | 极老浏览器也支持 | 现代浏览器支持（几乎全覆盖） |
| 推荐程度 | 仅用于简单单行 | ✅ 99% 场景推荐 |
换行的，space-x 与 gap 的区别
换行的，space-y 与 gap 的区别
面试标准答案
- space-x/y 是通过给子元素添加 margin 实现间距，不支持换行布局，容易产生间距错乱；
- gap 是 Flex/Grid 原生的容器间隙属性，支持自动换行，间距统一稳定，是现代布局的首选