Why is there a top-margin while slideFade is animating?

Question

Why does slideFade create a margin on the top side of the div? Does anyone have a solution to not make this occur?

Changing the margins don't seem to do anything and I'm left absolutely clueless.

 $(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

Actually, it interferes with these elements

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

Try to leave them out and it works.

Answer 2

我很抱歉回答我自己的问题，但它的发生是由于上面 div 的行高干扰了 slideFaded 对象。