Div-content visible althought div-height = 0

Question

I made an ul inside a div. I expected the ul to disappear when I set div {height: 0;} but the list is still visible.

overflow:hidden makes the list invisible, but it seems that it still has impact on the div's height.

diaplay:none works, but the list should have a transition effect. That's why I want set height to 0.

how cam I make the list disappear and come back with transition?

 html, body { background-color: gray } .toggle { width: 100%; display: flex; justify-content: center; align-content: center; margin-top: 5vh; background-color: #ff7f7f; } .toggle ul li { display: flex; justify-content: center; align-items: center; list-style: none; width: 35vw; height: 6vh; margin-bottom: 5px; border: 2px solid #ffffff; border-radius: 0px; font-size: 3vh; color: #fff; font-weight: 500; cursor: pointer; transition: all 0.5s; }

 <div class="toggle"> <ul> <li>AAA</li> <li>BBB</li> <li>CCC</li> <li>DDD</li> </ul> <ul> <li>EEE</li> <li>FFF</li> <li>GGG</li> <li>HHH</li> </ul> </div>

isolated problem

full problem

image of full problem It should look like using display: none, because overflov:hidden still has impact on the layout.

Answer 1

You have margin-top: 5vh; on the .toggle class in your full example.

The element's height is 0 as expected, but the margins you specified for the element are of course still respected.