Почему у этого элемента h3 / a есть лишнее пространство внизу?
Я кодирую веб-сайт, и у меня есть элемент заголовка, который содержит привязку с некоторым текстом. Однако текст по какой-то причине выровнен по верхнему краю элемента 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;
}
Что касается line-height, я попытался установить его на 1 и рекомендованный 0.8em, но эти значения не имеют значения, когда я добавляю их в стили.
Это картина того, что произошло, когда я попытался искусственно изменить высоту строки, поместив line-height: 0.8em в элемент h3.
Если вопрос действительно Зачем, тогда просто рассмотрите документ без таблиц стилей. Конечно, вам нужно место под заголовками! Так было очень давно, и это имеет смысл. User-agent - это ваш браузер, а стиль normalize предназначен только для нормализации различий между браузерами. Так что опять же, здесь нет никаких сюрпризов. Настроить margin:0; тоже не так уж и сложно.
Я пришел сюда с той же проблемой - ни один из ответов не имеет отношения к этому вопросу. @ippi, установка нулевого поля здесь не работает. Проблема связана с самим шрифтом, потому что под символами есть лишнее пространство. Единственное решение - выбрать другой шрифт или как-то отредактировать глифы и создать свою собственную версию.
Ответы 5
Похоже, у него может быть установлен дополнительный атрибут line-height. Не могли бы вы также добавить полный список вычисленных стилей из инструментов разработчика хромов?
Есть место для нисходящие символы. Вы можете настроить свойство line-height, чтобы удалить его, если хотите, уменьшив высоту строки ниже ее естественного значения. Например:
line-height: 0.8em;
Я пробовал это (я поместил значение непосредственно в элемент h3, но это не имело никакого значения). Поле h3 становится меньше, но текст внутри проходит сквозь него.
Его можно варьировать от шрифта к шрифту
вы можете решить эту проблему, указав line-height в своих свойствах.
Я исправлял это раньше, изменив свойство display на block.
Ответ заключается в том, что вы не можете использовать CSS - в этом шрифте есть что-то странное, что означает, что у него есть дополнительное пространство под встроенными в него символами. Вы можете увидеть это на странице Google Fonts: https://fonts.google.com/specimen/Bebas+Neue?preview.text=Tom%20D%20Chambers&preview.text_type=custom#about.
Решение состоит в том, чтобы использовать другой шрифт, в котором нет этой (необычной) проблемы.
Вы не предоставляете воспроизводимый пример, по крайней мере, добавляете структуру html, чтобы сделать ее доступной для фрагментов, когда задаете вопрос, связанный с html и css.