如何在CSS中缩小缩放后div元素间的间距？

问题根源 #

transform: scale()仅对元素做视觉缩放，不会修改元素在文档流中的实际占位尺寸。你的flex容器使用space-around时，会基于星星缩放前的原始尺寸分配间距，所以即使星星视觉上变小了，间距还是保持原样，甚至会因为原始尺寸过大导致星星超出容器。

解决方案 #

1. 直接修改元素实际尺寸（推荐）

放弃用transform: scale()缩小元素，直接调整.star的width、height等盒模型属性，让元素的实际占位变小。这样flex布局会自动重新计算间距，完美适配容器：

.star {
  /* 替换transform: scale(.15)，直接设置目标尺寸 */
  width: 18px;
  height: 18px;
  transform: rotate(35deg); /* 保留旋转效果即可 */
  /* 其他原有样式 */
}

2. 必须使用transform: scale时的处理方法

如果因特殊需求必须用缩放，可以给每个星星套一层容器，将缩放后的视觉尺寸设为外层容器的实际尺寸，再通过overflow: hidden裁剪超出部分。这样flex布局会基于外层容器的尺寸计算间距：

• HTML结构调整：

<div class="flex-container">
  <div class="star-wrapper">
    <div class="star"></div>
  </div>
  <!-- 重复4次上述star-wrapper结构 -->
</div>

• CSS修改：

.star-wrapper {
  /* 设置为缩放后的视觉尺寸 */
  width: 18px;
  height: 18px;
  overflow: hidden;
}
.star {
  /* 原始大尺寸 */
  width: 120px;
  height: 120px;
  transform: rotate(35deg) scale(.15);
  transform-origin: center; /* 确保缩放中心正确 */
  /* 其他原有样式 */
}

3. 更灵活的间距控制

可以把flex容器的justify-content: space-around换成justify-content: center，配合gap属性直接设置星星之间的固定间距，避免依赖元素尺寸自动分配：

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px; /* 直接定义星星间的间距 */
}

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