1

so I want to scale a div down, but when I do that, it still takes up the same amount of space, but there is just whitespace instead, and then it is small in the middle.

But I want it to actually take up less space, and allow the elements above and below to be closer to it.

Heres an example of the problem: 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);
}

Codepen:

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

Tobias H.
  • 426
  • 1
  • 6
  • 18
  • 2
    you cannot do this with scale, you need to reduce the width/height – Temani Afif Nov 14 '21 at 13:33
  • Does this answer your question? [CSS transform: scale does not change DOM size?](https://stackoverflow.com/questions/32835144/css-transform-scale-does-not-change-dom-size) – aerial Nov 14 '21 at 13:52
  • Yes, it explains why it is that way, but I still don't know what to do – Tobias H. Nov 14 '21 at 14:10

1 Answers1

-2

Add styles to the html and body elements to reset all the whitespaces.

html,
body {
  margin:0;
  padding:0;
  overflow-x:hidden;
}
Fabian S.
  • 2,441
  • 2
  • 24
  • 34
Emmanuel Yeboah
  • 1
  • 1
  • This does remove any whitespace on the edges of the screen, but that is not what I am talking about. This is a specific problem to do with scaling. – Tobias H. Nov 14 '21 at 14:08