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