【发布时间】：2019-05-22 11:55:04
【问题描述】：
这是演示：https://codepen.io/jchi2241/pen/dEzMZo?editors=1100
当未选中同级输入元素时，我将最大高度为 0 的 <ul> 隐藏，并在选中时将 <ul> 最大高度设置为 10em。我专门使用 max-height 来为每个部分的打开和关闭设置动画。
但是，我意识到<ul> 在<label> 下方占用了相当多的空间，即使最大高度为0。如果您删除<ul> 元素或设置，这很明显<ul> 到 position: absolute 或 display: none 将其从 DOM 流中取出。我不想使用任何一种方法，因为这将不允许过渡动画。
所以回到最初的问题 - 是什么导致<ul> 占用<label> 以下的空间，即使它的高度设置为 0？在保持过渡动画的同时摆脱这个空间的理想方法是什么？
【问题讨论】：
-
它可以防止边距折叠。查找该术语。
-
对于ul以下的空间，可以使用"margin-bottom:0"
-
请在问题本身中包含所有相关代码。不要让我们离开现场去寻找关键信息。最好使用 StackSnippets 创建一个minimal reproducible example
-
^ 请参阅帖子中的 codepen 链接
-
Codepen 本身不在问题中，让我们尽可能轻松地为您提供帮助。请参阅：stackoverflow.com/help/on-topic。请注意第 1 点：在问题本身中。如果 codepen 出现故障，我们将丢失手头问题的关键信息。回答问题所需的所有内容都需要在问题本身中提供，而不是外部链接。
标签： html css css-animations