Тег привязки (который по умолчанию является встроенным) не учитывает свойство нижнего поля ближайшего соседа над ним. Это почему?

Question

Простая скрипка: https://jsfiddle.net/7frtbhpg/12/

Выше очень простая целевая страница (без использования display: flex). Тег a оформлен как кнопка:

#showcase a {
        /* display: inline-block; */
        margin-top:20px;
        color: #fff;
        text-decoration: none;
        background-color: #28a745;
        padding: 13px 40px;
        border-radius: 10px;
      }

Я заметил, что как только я закомментирую свойство display: inline-block тега 'a', он соблюдает его отступы и не уважает его поля -top свойство, которое ожидается.

Но, кроме того, оно также не соблюдает свойство margin-bottom элемента, расположенного чуть выше него. Почему?

Изменить: отступ тега 'a' перекрывался с нижним краем элемента над ним. Таким образом, создавалось впечатление, что свойство margin-bottom не работает, но на самом деле оно работает, потому что тег 'a' перемещается вниз после увеличения нижнего поля.