Почему элемент все еще занимает место, даже если высота равна 0?

Question

Вот демо: https://codepen.io/jchi2241/pen/dEzMZo?editors=1100

Я скрываю <ul> с максимальной высотой 0, когда элемент ввода родного брата не отмечен, и устанавливаю максимальную высоту <ul> на 10em, когда отмечен. Я использую максимальную высоту специально для анимации открытия и закрытия для каждого раздела.

Однако я понял, что <ul> занимает заметное количество места ниже <label>, даже когда максимальная высота равна 0. Это очевидно, если вы удалите элемент <ul> или набор <ul> - position: absolute или display: none, вынимающие его из потока DOM. Я не хочу использовать ни один из методов, так как это не позволит использовать анимацию перехода.

Итак, чтобы вернуться к первоначальному вопросу - что заставляет <ul> занимать пространство ниже <label>, даже если его высота установлена ​​в 0? Какой идеальный способ избавиться от этого пространства при сохранении анимации перехода?

Answer 1

Этот пробел из-за <a>, который находится внутри <li>. Когда <li> содержит <a> и вы нажимаете на ввод, чтобы запустить анимацию, вам нужно установить display:off, чтобы удалить это пространство, и снова установить display:on, чтобы вернуть <a> в <li>.

На рисунке справа показано меньше места после установки displaying:off для тега <a>.