resize parent div after using transform: translate on a child tag-CodePudding

So after changing the position of a div using transform translate, the parent div does not resize accordingly to fill the white space. Any advice would be appreciated.

<script src="https://cdn.tailwindcss.com"></script>
<p>
Distance from top
</p>
<section>
  <div >
    <div >
      <div >
        <p>Lorum ipsum !</p>
      </div>
      <div >
        <p>Lorum ipsum !</p>
      </div>
      <div >
        <p>Lorum ipsum !</p>
      </div>
    </div>
  </div>
</section>
<p>
Distance from bottom
</p>

CodePudding user response：

❌ I tried the translate way but not work,
❌ I tried the position way and still doesn't work.
✅ but with the negative margin trick, is working!

-mt-16, -mt-32 class solve it,

mt means margin-top in plain CSS
and if you add - prefix, means negative value.

and that it, solved!

<script src="https://cdn.tailwindcss.com"></script>
<p>
  Distance from top
</p>
<section>
  <div >
    <div >
      <div >
        <p>Lorum ipsum !</p>
      </div>
      <div >
        <p>Lorum ipsum !</p>
      </div>
      <div >
        <p>Lorum ipsum !</p>
      </div>
    </div>
  </div>
</section>
<p>
  Distance from bottom
</p>

if there is a space between the text and content is because of the container class, but is solved. (see Distance from bottom text in your example and in my mine, huge improvement)