隐藏内容的最佳方法

Question

请有人帮我解决这个问题。我有一个切换动画，但是当我总是隐藏内容时，按钮和桌面之间会有一个空格。我尝试使用display: block并可以工作，但是动画受到了损坏。我认为问题在于子标签的填充和边距。

下面，我将我的CSS代码和图像放入该问题中。第一个在桌子和顶部之间有一个空格。

.hidden {
    &__details {
        opacity: 0;
        height: 0;
        padding: 0;
        visibility: hidden;
        transition: .4s;
        &.visible {
            height: 100%;
            opacity: 1;
            visibility: visible;
            padding: 20px;
            position: relative;
        }
    }
} 

Answer 1

尝试使用不显示属性。因为它消除了特定标签消耗的任何大小。