如何定位并消除switch元素周围导致父容器溢出的多余间距？

问题 #

switch元素周围存在莫名间距，导致check-lower容器尺寸超出实际内容范围，引发溢出问题。使用overflow:hidden会破坏switch的缩放效果，排查margin、padding未发现异常，尝试transform:translateX也无法消除容器内的间距。

原因 #

transform: scale()缩放元素时，元素的原始占位空间不会改变——你给switch设置了transform: scale(0.25)，但它在flex容器里仍然占据原始宽高（150px+左右padding，195px+上下padding）的空间，这就是容器出现额外间距的核心原因。

解决方案 #

方案1：调整缩放原点+位移抵消 #

修改.switch的CSS，添加缩放原点并通过translate抵消原始占位的空白：

.switch {
  display: block;
  background-color: black;
  width: 150px;
  height: 195px;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 15px #47434c, inset 0 0 2px 22px black;
  border-radius: 5px;
  padding: 20px;
  perspective: 700px;
  /* 新增缩放原点，确保缩放从左上角开始 */
  transform-origin: top left;
  /* 缩放后向左向上移动75%，抵消原始占位的空白 */
  transform: scale(0.25) translate(-75%, -75%);
}

方案2：用外层容器包裹控制占位 #

给switch套一层容器，把缩放应用在容器上，容器根据缩放后的尺寸占据空间：

修改后的HTML：

<div class="check-lower">
  <label class="check-display" id="display-right">Use lowercase</label>

  <div class="switch-wrapper">
    <label class="switch">
      <input type="checkbox" id="lowercase" class="checks">
      <div class="button">
        <div class="light"></div>
        <div class="dots"></div>
        <div class="characters"></div>
        <div class="shine"></div>
        <div class="shadow"></div>
      </div>
    </label>
  </div>
</div>

新增的CSS：

.switch-wrapper {
  /* 计算缩放后的尺寸：原始宽(150+40)=190，高(195+40)=235，缩放0.25后为47.5px宽，58.75px高 */
  width: 48px;
  height: 59px;
  overflow: visible;
  position: relative;
}
.switch {
  display: block;
  background-color: black;
  width: 150px;
  height: 195px;
  box-shadow: 0 0 10px 2px rgba(0, 0, 0, 0.2), 0 0 1px 2px black, inset 0 2px 2px -2px white, inset 0 0 2px 15px #47434c, inset 0 0 2px 22px black;
  border-radius: 5px;
  padding: 20px;
  perspective: 700px;
  transform: scale(0.25);
  transform-origin: top left;
  position: absolute;
  top: 0;
  left: 0;
}

两种方案都能解决容器的额外间距问题，方案1更简洁，方案2对布局的控制更精准，可根据实际场景选择。

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