Откуда появился непонятный отступ после добавления display: inline-block;?

Question

[freeman0204]

Откуда появился непонятный отступ после добавления display: inline-block; #home a ? codepen.io/anon/pen/PPpGOd
Я понимаю что ссылка изначально строчный элемент и воспринимает только ширину, а высоту нет и что после добавления display: inline-block; она начинает воспринимать высоту. Но откуда отступ?

Comments

[Андрей Б.]

какой отступ, сделайте скрин

[freeman0204]

Андрей Б.: c display: inline-block; screenshot.ru/b2ff820012055ae9a59d6cd84a9015dd и без screenshot.ru/4d9224a01632e9c210702bf8ce3e36c8

[Андрей Б.]

Артур Черешнюк повторяться не буду, вам уже ответили

Answer 1

[Mr Crabbz]

Потому что margin-bottom вашего заголовка без display:inline-block для ссылки отсчитывается не от края желтой заливки, но от края текста этой ссылки (т.к. элемент строчный). А при inline-block просчет ведется уже от края вашей заливки, т.к. элемент превратился в блочный.

Элементарно проверяется инспектором:

с inline-block:


Без инлайн-блока:

Comments

[freeman0204]

Спасибо!