
父容器gap控制子项之间的间隔,子组件margin还会额外参与布局。两者叠加可能导致换行后间距不一致;应先确认父子关系与方向,让每一种间距承担清楚职责。
测量实际空白来源
记录卡片外框之间、卡片内部及父容器边缘的距离。空白可能来自图片本身留白、最小高度或分布式对齐,不一定是gap。借助盒模型逐层确认,不要只凭编辑器一个数字反复微调,最后留下无法解释的正负间距。
把组间和内部节奏分开
卡片之间可由父容器统一管理,标题与说明之间由内部布局处理。每张卡片都加左右margin,外沿和中间可能形成不同总距离。不要给每项设置不同补偿值来对齐一行,增加卡片或换行后很容易再次失衡。

核对响应式覆盖和方向
横向、纵向及换行布局使用不同方向的间距,手机也可能有独立值。查看行gap、列gap和子项外边距是否同时存在,记录哪些值为继承。重置时保护必要分区间隔,不将整页所有margin和padding一并清空。
用长短内容复核
测试不同标题长度、缺图和按钮换行的卡片,检查各行和手机单列的节奏。若父容器使用space-between等分布式对齐,剩余空间会额外参与,应与gap分别解释。保留每个数值的作用,便于以后统一维护。
关键区别

gap:管理子项之间间隔;不含全部外部留白。
margin:管理对象外距;可能与gap叠加。
padding:保护内容边界;不是卡片组间距。
怎样确认处理到位
卡片之间距离一致、外沿整齐,手机没有双倍空白,长短内容完整可读,按钮不被截掉;每个保留的间距值都有明确的组件或分区用途。
容易误判的边界
gap与margin不必机械二选一。应按结构分工,不能为消除一处空白,把必要阅读留白和按钮触控空间一起删除。
