2

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

Bugbeeb
  • 2,021
  • 1
  • 9
  • 26

1 Answers1

1

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.

Joundill
  • 6,828
  • 12
  • 36
  • 50