Почему этот элемент h3 / a имеет дополнительное пространство внизу?

Question

Я кодирую веб-сайт, и у меня есть элемент заголовка, который содержит привязку с некоторым текстом. Тем не менее, текст по какой-то причине выровнен по верху элемента h3 / a, и я не могу заставить его выравниваться по вертикали или заставить h3 соответствовать тексту.

Элемент SASS h3:

h3
  font-family: "Bebas Neue Regular", sans-serif
  font-size: 60px
  font-weight: normal
  letter-spacing: 3px
  color: white

Кроме того, вот изображение проблемы:

Существует несколько дополнительных стилей из normalize.css и агента пользователя:

h3 {
  display: block;
  font-size: 1.17em; //overridden
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  font-weight: bold; //overridden
}

//the h3 inherits this
html { 
  line-height: 1.15;
}

Что касается высоты строки, я попытался установить ее равной 1 и рекомендованным 0,8em, но эти значения не имеют значения, когда я добавляю их в стили.

Это картинка того, что произошло, когда я попытался искусственно изменить высоту строки, поместив line-height: 0.8em на элемент h3.

Answer 1

Я исправил это раньше, изменив свойство display на block.

Answer 2

Есть место для символьных спусков . Вы можете настроить свойство line-height, чтобы удалить его при желании, уменьшив высоту строки ниже ее естественного значения. Например:

line-height: 0.8em;

Answer 3

Его можно менять шрифтом за шрифтом Вы можете решить эту проблему, указав line-height в ваших свойствах.

Answer 4

Похоже, может быть установлен дополнительный атрибут line-height. Не могли бы вы также добавить полный список вычисленных стилей из инструментов разработчика Chrome?