Почему ссылка ведет себя таким образом?

Question

[Mak_Pet]

Элемент не должным образом реагирует на нижний отступ верхнего элемента, так же ноль реакции на line-height.

Репозиторий с кодом

https://github.com/MakPet/Bootstrap_two

Результат

https://makpet.github.io/Bootstrap_two/

Answer 1

[Abr_ya]

Ссылка - inline-элемент, со своими особенностями.
Как вариант - задайте ей display: block; и посмотрите: вы такой реакции на margin верхнего элемента хотели?
Ещё вариант: обернуть в блочный элемент.

Насчет высоты строки не очень понял: где вы хотите её использовать, если строка одна? Но при изменении отображения на блочное и он начнет "играть".

Comments

[Mak_Pet]

Мне известно о том, что ссылка это строчный элемент и именно про эти особенности я бы хотел узнать.

[Mak_Pet]

display inline-flex или inline-block решает проблему, но я хотел бы узнать причины такого поведения именно с inline

[Mak_Pet]

А выстоту строки использую для того, т.к учитываю-то, что слов может быть несколько больше.

Answer 2

[nuffyweb]

Используйте flex:

.demonstration-lastest-work__link-wrapper {
display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

Comments

[Abr_ya]

Если человек учится верстать, то flex лучше изучать полноценно и осознанно, имхо.
А для начала разобраться в отличиях inline и block.

[Mak_Pet]

Не считаю нужным тут использовать флексы, контент и так идет сверху вниз, к чему писать лишний код.