Проблема со свойством CSS display:inline-block

Недавно я ответил другому пользователю об универсальном методе для 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>

Немного покопавшись, я пришел к выводу, что это связано со свойством display:inline-block, которое у него есть над элементами .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?

для более точного объяснения к вашему элементу добавлено переполнение: скрытый, делающий базовую линию внизу, а не текст.. и, поскольку выравнивание является базовым, у вас есть эта проблема

— 12.02.2019 16:19

@TemaniAfif Спасибо, что указали на это.

— 12.02.2019 16:21

добавлен еще один дубликат с более подробной информацией

— 12.02.2019 16:21

jquery css

12.02.2019 16:16