title: Why does an element still take up space even when height is 0?
body: <p>Here's the demo: <a href="https://codepen.io/jchi2241/pen/dEzMZo?editors=1100" rel="nofollow noreferrer">https://codepen.io/jchi2241/pen/dEzMZo?editors=1100</a></p>
  
  <p>I am hiding the <code>&lt;ul&gt;</code> with a max-height of 0 when the sibling input element is unchecked, and setting the <code>&lt;ul&gt;</code> max-height to 10em when checked. I am using max-height specifically to animate the opening and closing for each section.</p>
  
  <p>However, what I've realized is the <code>&lt;ul&gt;</code> is taking up a noticeable amount of space below the <code>&lt;label&gt;</code> even when the max-height is 0. This is obvious if you delete the <code>&lt;ul&gt;</code> element or set the <code>&lt;ul&gt;</code> to <code>position: absolute</code> or <code>display: none</code> taking it out of the DOM flow. I don't want to use either methods as that will not allow for the transition animation.</p>
  
  <p>So to get back to the original question - what is causing the <code>&lt;ul&gt;</code> to take up space below the <code>&lt;label&gt;</code> even when it's height is set to 0? What is the ideal way to rid of this space while maintaining the transition animation?</p>