@freeman0204

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

Откуда появился непонятный отступ после добавления display: inline-block; #home a ? codepen.io/anon/pen/PPpGOd
Я понимаю что ссылка изначально строчный элемент и воспринимает только ширину, а высоту нет и что после добавления display: inline-block; она начинает воспринимать высоту. Но откуда отступ?
  • Вопрос задан
  • 181 просмотр
Решения вопроса 1
Punkie
@Punkie
Потому что margin-bottom вашего заголовка без display:inline-block для ссылки отсчитывается не от края желтой заливки, но от края текста этой ссылки (т.к. элемент строчный). А при inline-block просчет ведется уже от края вашей заливки, т.к. элемент превратился в блочный.

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

с inline-block:
4518eb2a9d2549caa336dad27e9f4e5b.png

Без инлайн-блока:
365149ea3a7a486ca007a7633e4ad363.png
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы