如果你缩放一个带有外边距的元素，它在页面上的位置仍然保持不变，尽管查看元素时会看到外边距变小，元素并没有向左移动。

有没有一种CSS的方法，在缩放元素时同时考虑外边距？（不缩放父元素）

* {
  margin: 0;
}

div {
  width: 50px;
  height: 50px;
  background-color: red;
  margin-left: 50px;
  margin-bottom: 20px;
}

.scaleDiv {
  transform: scale(.2);
  transform-origin: top left;
}

<div></div>
<div class='scaleDiv'></div>

解决方案

改用zoom来试试

* {
  margin: 0;
}

div {
  width: 50px;
  height: 50px;
  background-color: red;
  margin-left: 50px;
  margin-bottom: 20px;
}

.scaleDiv {
  zoom: .2;
}

<div></div>
<div class='scaleDiv'></div>