CSS使用transform:translate()后产生的空白间隙如何消除？

开发过程中调整Col1栏图片位置时，使用translateY属性将图片上移后，Col1和Col2两栏之间出现空白间隙；尝试给Col2也加上移的translateY属性后，Col2栏下方又出现空白区域，需要消除这类transform位移带来的多余空白。

对应参考代码如下：

// Card容器
<div className="card bg-white text-[color:var(--vddBlue)] rounded-3xl
    m-auto mt-[12rem] p-1 w-[375px] h-auto grid grid-cols-1  
    md:grid-cols-2 md:w-[1440px]">

// Col1 图片栏
  <div className="grid translate-y-[-10.25rem] scale-75"><img /></div>

// Col2 内容栏
  <div className="faq grid self-center justify-center h-auto translate-y-[-9rem] 
   md:translate-y-[0rem]">

</div>

transform的位移效果属于视觉渲染层面的偏移，不会改变元素在正常文档流中的原始占位，元素上移后原来占据的位置会被保留，自然就会产生多余的空白间隙。

• 替换位移实现方式：用负margin替代translateY做偏移。负margin会直接改变元素在文档流中的占位，不会残留多余空隙。比如Col1需要上移10.25rem，就把translate-y-[-10.25rem]替换为mt-[-10.25rem]，Col2的移动端偏移也用对应负margin调整即可，同时给父级card容器加上overflow-hidden，避免图片移出容器的部分产生多余滚动区域。
• 固定父容器高度：如果因为动画等需求必须使用transform做位移，就不要给card容器用h-auto自动撑高，手动计算内容实际展示的高度给容器设固定值，自动撑高会按照元素未偏移的原始位置计算总高度，会把偏移留出的空白算进容器高度里。
• 图片脱离文档流：给card容器加relative定位，装图片的Col1容器改成absolute定位，通过top/left属性调整图片到目标位置。绝对定位的元素脱离正常文档流，不会占据常规流位置，从根源上避免位移产生的空白，跨端适配时调整位置也更直观。

内容的提问来源于stack exchange，提问作者tengxuanp