为什么元素即使在高度为0时仍会占用空间？

Question

这是演示：https://codepen.io/jchi2241/pen/dEzMZo?editors=1100

当未选中同级输入元素时，我将隐藏{@ {1}}的最大高度，而选中<ul>的最大高度为10em。我正在使用max-height专门为每个部分的打开和关闭设置动画。

但是，我意识到<ul>在<ul>下占据了相当大的空间，即使最大高度为0也是如此。如果删除{{ 1}}元素，或将<label>设置为<ul>或<ul>，将其从DOM流中删除。我不想使用任何一种方法，因为这将不允许过渡动画。

因此，回到最初的问题-是什么导致position: absolute在display: none下方占用空间，即使其高度设置为0也是如此？在保持过渡动画的同时摆脱该空间的理想方法是什么？

Answer 1

此差距是由于<a>位于<li>内部。当<li>包含<a>并单击输入以触发动画时，您需要设置display:off来删除该空间，然后再次设置display:on以退回{{1} }到<a>。

在标签<li>上设置displaying:off后，右侧图片显示的空间较小。