Определение в JS высоты блока и сдвиг вниз на эту высоту

Я посмотрел, в чём там проблема. Скрипт пытается найти square[3], так как последнее вычисленное значение num равно 3. И естественно, не находит его, о чём и пишет в сообщении о ошибке.
Вообще, подобные задачи решаются иначе. Выбросьте нумерацию ms-box, и код будет таким:

$(document).ready(function () {
        const mainBoxNews = document.querySelector('.main-box-news');
        if (mainBoxNews) {
                        $('.ms-box a').hover(
                                function () {
                                        $(this).parent().find('.mbn__shor').css('margin-bottom','0');
                                }, function () {
                                        let el=$(this).parent().find('.mbn__shor');
                                        $(el).css('margin-bottom','-'+$(el).height()+'px');
                                }
                        );

        }
});

Хотя  на самом деле, скрывать элементы через marginBottom - тоже то ещё извращение.

Там только направление. А в итоге - что то типо такого:

document.querySelectorAll('.mbn__shor').forEach (
  e => {
    const a = e.closest('a');
    if (a) {
      const h = e.offsetHeight;
      e.style.marginBottom = `-${h}px`;

      a.addEventListener('mouseover', ev=>{
        e.style.marginBottom = 0;
      });

      a.addEventListener('mouseout', ev=>{
        e.style.marginBottom = `-${h}px`;
      });
  }
});

В IE и старых браузерах не работает.

ничего не понял, скрыть показать блок в 1 строчку уже не кошерно?🤔

146 % полифил гуглится. А если нет, то пишется в пару десятков строк

А просто for - "некошерно"? ;)

Можно и for. Просто мне так больше нравится. 

for (var i = 0; i < _nodelist.length; ++i) {
  ...
}

// vs

_nodelist.forEach(
  e=>{}
)

Дело вкуса.

Спасибо большое, но данный код не скрывает блоки при первоначальной загрузке страницы. Скрываются только после наведения курсора мыши. И что не так с marginBottom? Вроде хорошо работает. Считаете как-то по-другому было бы лучше?

Спасибо большое.

Ну Вы же учитесь? Вот и доделайте. Вариантов несколько. Я же переписал только  тот кусок, который вызывал у Вас затруднения.

Не применяют обычно для этой цели margin. Применяют display, применяют position, применяют height/width, ещё что-то применяют, а margin - это экзотика какая-то.
И у вас же подключен jQuery, причём никакой анимации - для этого вообще существуют методы show/hide/toggle.

Спасибо большое всем за помощь.

Получилось вот так. Всё вроде работает нормально. Поправьте, если считаете, что что-то не так.

$(document).ready(function () {
        const mainBoxNews = document.querySelector('.main-box-news');
        if (mainBoxNews) {
                $('.mbn__shor').each(function () {
                        let el = $(this).parent().find('.mbn__shor');
                        $(el).css('margin-bottom', '-' + $(el).innerHeight() + 'px');
                });

                $('.ms-box a').hover(
                        function () {
                                $(this).parent().find('.mbn__shor').css('margin-bottom', '0');
                        }, function () {
                                let el = $(this).parent().find('.mbn__shor');
                                $(el).css('margin-bottom', '-' + $(el).innerHeight() + 'px');
                        }
                );
        }
});

Тут я с вами не соглашусь. display нет позволит скрыть блок плавно. К блоку для плавной смены margin я могу применить transition.
Блок с position:absolute не влияет на другие объекты вокруг себя, а мне же надо, чтобы он выталкивал блок, который находится выше. Примеры в видео, который я разместил выше.
Можно было использовать height, но большой разницы я не вижу.
Методы show/hide/toggle пока не знаю как использовать. Попробую изучить