Html 删除缩放后的空白

我对尺度变换有点问题。我希望调整元素的大小，但当我这样做时，我的旧大小占据了空间，而下一个元素将经历这个旧大小如何删除此约束？

HTML

<!-- White space with Scale -->
<div class="scale"></div>
<div class="scale"></div>

<!-- Whitout Scale -->
<div></div>
<div></div>

JSFiddle：

---

感谢您的回复。

您可以尝试以下代码，我希望对您有用：

 <style>
 div:nth-of-type(even) { background: blue; }
 div:nth-of-type(odd) { background: red; }


 div {
 width: 100px;
 height: 100px;
 }

.scale {
 transform: scale(1);
transform-origin: top left;
}
</style>

div:n类型（偶数）{背景：蓝色；}
div:n类型（奇数）{背景：红色；}
div{
宽度：100px；
高度：100px；
}
.天平{
变换：比例（1）；
变换原点：左上角；
}

var scaleTo=0.5，
itemWidth=$（'.scaleB'）.width（），
itemHeight=$（'.scaleB'）.height（）
;
函数规模（测量）{
var输出=测量*标度；
返回输出；
}
$（'.scaleB'）。在({
“鼠标悬停”：函数（事件）{
$（this.css）({
“宽度”：scaleThis（itemWidth）+“px”，
“高度”：刻度此（itemHeight）+“px”
});
},
“mouseout”：函数（事件）{
$（this.css）({
“宽度”：itemWidth+“px”，
“高度”：itemHeight+“px”
});
}
});
.wrapper{
背景色：#中交；
}
.包装工：之后{
内容：“正常”；
}
.包装秤{
背景色：#dddddd；
}
.wrapperScale:之后{
内容：“包装”；
}
.wrapper\u jQuery:之后{
内容：“jQuery”；
}
.wrapper div:n个类型（偶数），
.wrapperScale div:n类型（偶数）{
背景：蓝色；
}
.wrapper div:n个类型（奇数），
.wrapperScale div:n类型（奇数）{
背景：红色；
}
.scale、.wrapperScale div、.scaleB{
宽度：50px；
高度：50px；
}
.scale:悬停，.wrapperScale:悬停{
变换：比例（0.5）；
变换原点：左上角；
}

这里有一个相关的问题，这个问题可以解决你的问题。正如上面两个人所发布的，关于这个主题有一些线索，但即使你让它工作起来，我也不太确定浏览器的兼容性。。。这不是使用jquery的另一种选择吗？不清楚你在问什么，但是
transform
是一种纯粹的视觉效果。它不会影响元素布局或实际大小。我回答了这个问题，我认为你完全没有抓住问题的重点。还有，比例（1）

的意义是什么，因为这是您的原始对象

 <style>
 div:nth-of-type(even) { background: blue; }
 div:nth-of-type(odd) { background: red; }


 div {
 width: 100px;
 height: 100px;
 }

.scale {
 transform: scale(1);
transform-origin: top left;
}
</style>