Unknown gap between list elements during transition

user_10307576 0
Viewed 58

I'm animating the height of li elements using react-transition-group and there is a pesky gap that forms between two elements before the middle elements transitions in. It can't be the margins What is causing this gap and how can I get rid of it? https://codesandbox.io/s/mui-sandbox-forked-m1t7l

enter image description here

react-transition-group css html
1 Answers

It's caused by the padding on .MuiListItem-root.

Even empty <li class="MuiListItem-root ...">s currently have the following rules applied:

padding-top: 8px;
padding-bottom: 8px;

Just get rid of those styles and the gap will disappear.

user_66327440
Related