与display：inline-block` CSS属性有关的问题[重复]

Question

这个问题已经在这里有了答案：

• 将嵌入式块DIV对齐到容器元素的顶部 4个答案
• 为什么将内联块元素向下推？ 8个答案

我最近对另一个用户做出了一个答案，该答案关于JQuery :: slideUp（）顺序多个项目的通用方法。 如果需要参考，可以在这里查看：

按顺序向上滑动元素

提出解决方案后， OP向我询问了有关下一个代码的初始跳跃效果 ：

 $('button').on('click', function() { close_all($(".block")); }); function close_all(elements, idx=0) { if (idx >= elements.length) return; let cb = () => close_all(elements, idx + 1); elements.eq(idx).slideUp(2000, cb); } 

 .block { display: inline-block; width:14%; background:gold; margin:0 9px; } #block1{ height:54px; } #block2{ height:25px; } #block3{ height:72px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='block' id='block1'>BLOCK 1</div> <div class='block' id='block2'>BLOCK 2</div> <div class='block' id='block3'>BLOCK 3</div> <button>CLICK</button> 

在深入研究之后，我发现这与他对.block元素拥有的display:inline-block属性有关。 对于到目前为止我已经读过的内容（我没有在CSS实验），此属性可以替代float:left 。 因此，我决定将样式更改为使用float:left而不是display:inline-block ，问题消失了。 您可以在下一个代码中检查它：

 $('button').on('click', function() { close_all($(".block")); }); function close_all(elements, idx=0) { if (idx >= elements.length) return; let cb = () => close_all(elements, idx + 1); elements.eq(idx).slideUp(2000, cb); } 

 .block { float: left; width:14%; background:gold; margin:0 9px; } #block1{ height:54px; } #block2{ height:25px; } #block3{ height:72px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class='block' id='block1'>BLOCK 1</div> <div class='block' id='block2'>BLOCK 2</div> <div class='block' id='block3'>BLOCK 3</div> <button>CLICK</button> 

有人知道我们使用display:inline-block时为什么会出现此问题？