2

Here's the demo: https://codepen.io/jchi2241/pen/dEzMZo?editors=1100

I am hiding the <ul> with a max-height of 0 when the sibling input element is unchecked, and setting the <ul> max-height to 10em when checked. I am using max-height specifically to animate the opening and closing for each section.

However, what I've realized is the <ul> is taking up a noticeable amount of space below the <label> even when the max-height is 0. This is obvious if you delete the <ul> element or set the <ul> to position: absolute or display: none taking it out of the DOM flow. I don't want to use either methods as that will not allow for the transition animation.

So to get back to the original question - what is causing the <ul> to take up space below the <label> even when it's height is set to 0? What is the ideal way to rid of this space while maintaining the transition animation?

jchi2241
  • 2,032
  • 1
  • 25
  • 49
  • 1
    It prevents margin collapse. Look up that term. – bjb568 May 22 '19 at 03:22
  • for space below ul, you can use "margin-bottom:0" – Abolfazl Panbehkar May 22 '19 at 03:22
  • Please include all relevant code in the question itself. Don't make us go off site to find critical information. Preferably use StackSnippets to create a [MCVE] – Jon P May 22 '19 at 03:59
  • ^ see codepen link in post – jchi2241 May 22 '19 at 18:56
  • Codepen is not in the question itself, make it as easy as possible for us to help you. Please see : https://stackoverflow.com/help/on-topic . Note in point 1: **in the question itself**. If codepen goes down, we lose critical information for the question at hand. Everything required to answer the question needs to be provided **in the question itself** , not an external link. – Jon P May 23 '19 at 00:41

2 Answers2

1

Add an overflow:hidden to the element, as well as set the max-height:0

That should solve your problem

Chuksdev
  • 11
  • 2
0

This gap is because of <a> that is located inside of <li>. When <li> contains <a> and you click on input to fire the animation, you need to set display:off to remove this space and again set display:on to back the <a> to <li>.

enter image description here

The right side picture shows less space after setting displaying:off on tag <a>.

ArashMad
  • 128
  • 1
  • 6
  • I don't think this is the correct CSS. So [far as I'm aware](https://developer.mozilla.org/en-US/docs/Web/CSS/display#syntax), the possible values for the `display` rule do not include `on` or `off`. Maybe you meant `none`? Also, you finish your answer using a different CSS rule you call `displaying`. Again, so far as I'm aware, there is [no such rule](https://developer.mozilla.org/en-US/docs/Web/CSS/displaying) with that name. I would edit the answer, but SO has too many pending edits currently. – Brian Hannay Mar 13 '23 at 17:02