使用CSS transform:scale缩放div后四周留白如何使其占用更少空间？

CSS的transform属性属于视觉效果层属性，仅修改元素的渲染外观，不会改变元素在文档流中的实际盒模型占位，所以你用scale缩放后，元素还是会占用缩放前的原始空间，才会出现四周留白、相邻元素无法靠近的情况。

以下是几种可直接落地的实现方式：

• 方案1：使用zoom属性（改动最小，优先推荐）
  zoom属性会同时修改元素的渲染尺寸和实际盒模型占位，直接替换scale即可：

div{
  width: fit-content;
  zoom: 0.5;
}

目前Chrome、Firefox、Safari等主流浏览器均已支持该属性，适配绝大多数场景。

• 方案2：嵌套父容器手动控制占位（兼容性最优）
  如果需要兼容极端老旧的浏览器，可以给目标div套一层父容器，通过控制父容器尺寸实现占位适配：
  修改后的HTML结构：

<h1>A title goes here</h1>
<div class="scale-wrapper">
  <div class="scale-content">
    <span>Some text here</span><br>
    <span>Some text here</span><br>
    <span>Some text here</span><br>
    <span>Some text here</span><br>
    <span>Some text here</span><br>
    <span>Some text here</span><br>
  </div>
</div>
<p>And some more text here</p>

对应的CSS样式：

/* 父容器用来控制实际占位 */
.scale-wrapper {
  width: fit-content;
  /* 高度按缩放比例调整，为原始高度*缩放比例，可根据实际内容调整数值 */
  height: 90px;
  overflow: hidden;
}
/* 内层元素做缩放处理 */
.scale-content {
  transform: scale(0.5);
  /* 缩放原点设为左上角，避免内容偏移 */
  transform-origin: top left;
}

• 方案3：负margin抵消留白（无需修改HTML）
  如果不想改动原有HTML结构，可以配合transform-origin和负margin消除多余留白：

div{
  width: fit-content;
  transform: scale(0.5);
  transform-origin: top left;
  /* 负margin数值按缩放比例调整，这里缩放0.5，所以底部留出一半高度的负margin抵消空白，左右同理 */
  margin: 0 0 -60px 0;
}

使用时可以根据实际内容的原始尺寸调整负margin的数值即可。

内容的提问来源于stack exchange，提问作者Tobias H.