Html CSS转换为淡出，但仍有一些空间保留在元素的位置

我有一个垂直排列的div列表，我试图在单击按钮时使某个元素淡出。当内容变得不可见时，我还需要将其高度和宽度设置为0以释放空间。如果我一次完成所有转换，div将改变高度和宽度，文本在变为不可见之前会奇怪地拉伸。我试图修复它是为了在高度/宽度转换上添加延迟，这似乎是可行的，但在div所在的位置，仍然保留一些空间，比如边距。我还尝试将边距/填充转换为0，但它没有任何作用

.list-element
    background-color: #E7E9EB;
    border-radius: 5px;
    margin: 20px;
    padding: 15px;
    display: flex;
    width: 100%;

我正在使用React，并在按下按钮时将以下类动态添加到div中

.list-element-approved
    opacity: 0;
    height: 0;
    width: 0;
    margin: 0;
    padding: 0;
    color: rgba(0, 0, 0, 0);
    transition: height 0.1s 1s, width 0.1s 1s, margin 0.5s 1s, padding 0.5s 1s, opacity 0.5s;

---

过渡后留下空间的原因是什么？如何删除它？

发生这种情况的原因是，尽管通过将高度设置为零使approved list元素不可见，但它仍然存在。周围可见的列表元素与相邻元素之间的间距为20像素，而不可见的相邻元素仍然存在。因此，两个可见列表项之间以及它们之间不可见列表项之间的总边距为40像素

以下是解决此问题的方法：

。列表元素已批准{
...
利润率：0-20px0；
...
}

---

或者，您必须完全删除已批准的列表项，但这会使您的转换效果消失。

发生这种情况的原因是，尽管您通过将其高度设置为零使已批准的列表元素不可见，但它仍然存在。周围可见的列表元素与相邻元素之间的间距为20像素，而不可见的相邻元素仍然存在。因此，两个可见列表项之间以及它们之间不可见列表项之间的总边距为40像素

以下是解决此问题的方法：

。列表元素已批准{
...
利润率：0-20px0；
...
}

---

或者，您必须完全删除已批准的列表项，但这会使您的过渡效果消失。

谢谢，这确实是个问题。出于某种原因，它只需要-10px，因为-20px是将它们粘合在一起，没有任何空间。这与边距折叠有关，当你移除元素高度和边距时，它前面的边距和它后面的边距，因为它没有完全移除，这使得空间的总计数

40px

，因为每个空间都有

20px

谢谢，这确实是个问题。出于某种原因，它只需要-10px，因为-20px是将它们粘合在一起，没有任何空间。这与边距折叠有关，当你移除元素高度和边距时，它前面的边距和它后面的边距，因为它没有完全移除，这使得空间的总计数

40px

，因为每个空间都有

20px