jquery - 为什么在 slideFade 动画时有顶部边距？

Question

为什么 slideFade 在 div 的顶部创建边距？有没有人有解决方案来避免这种情况发生？

更改边距似乎没有任何作用，我完全一无所知。

$(document).ready(function() {
  $(".hoofd_optie").hover(function() {
    $(this).css("cursor", "pointer");
  });
  $(".specificaties").hover(function() {
    $(this).css("cursor", "auto");
  });
  $(".hoofd_optie_naam").click(function() {
    $(this).parent().find(".specificaties").slideToggle();
  }).children().click(function(e) {
    e.stopPropagation();
  });
});

body {
  font-family: Arial, Helvetica, sans-serif;
  color: rgb(85, 85, 85);
}

#container {
  max-width: 960px;
}

.hoofd_optie {
  width: 100%;
  max-width: 960px;
}

.hoofd_optie_naam {
  width: 100%;
  max-width: 960px;
  height: 45px;
  background-color: #efefef;
}

.hoofd_optie_naam>.optie_naam,
.hoofd_optie>.prijs {
  font-size: 24pt;
  line-height: 35pt;
  font-weight: bold;
}

.hoofd_optie_naam>.optie_naam {
  float: left;
  padding-left: 20px;
}

.hoofd_optie_naam>.prijs {
  padding-right: 20px;
  float: right;
}

.hoofd_optie_naam>.prijs>.beschrijving {
  font-weight: normal;
  padding-left: 5px;
}

.beschrijving {
  font-size: 16px;
  line-height: 44pt;
  padding-left: 15px;
}

.specificaties {
  margin-top: 1px;
  width: 100%;
}

.specificatie {
  width: 100%;
  height: 35px;
  background-color: #efefef;
  margin-top: 1px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="allround" class="hoofd_optie">
  <div class="hoofd_optie_naam">
    <span class="optie_naam">Allround</span>
    <span class="beschrijving">Chinees fabricaat</span>
    <span class="prijs">€253,- <span class="beschrijving">per m² incl. montage</span></span>
  </div>
  <div class="specificaties">
    <div class="specificatie">
      <span class="specificatie_naam">Levertijd</span>
    </div>
    <div class="specificatie">
      <span class="specificatie_naam">Levertijd</span>
    </div>
    <div class="specificatie">
      <span class="specificatie_naam">Levertijd</span>
    </div>
    <div class="specificatie">
      <span class="specificatie_naam">Levertijd</span>
    </div>
    <div class="specificatie">
      <span class="specificatie_naam">Levertijd</span>
    </div>
  </div>
</div>

Answer 1

其实是干扰了这些元素

<span class="prijs">€253,- <span class="beschrijving">per m² incl. montage</span></span>
        </div>

尝试将它们排除在外，它会起作用。