使用 css 缩放只会留下空白

Question

所以我想缩小一个 div，但是当我这样做时，它仍然占用相同数量的空间，但只有空白，然后它在中间很小。

但我希望它实际上占用更少的空间，并让上面和下面的元素更接近它。

这是问题的一个例子： HTML：

<h1>A title goes here</h1>
  <div>
    <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>
<p>And some more text here</p>

CSS：

div{
  width: fit-content;
  transform: scale(0.5);
}

代码笔：

https://codepen.io/Tobias-Hewel/pen/ExvdENN

Answer 1

向html 和body 元素添加样式以重置所有空格。

html,
body {
  margin:0;
  padding:0;
  overflow-x:hidden;
}