Как разместить H1 на своей высоте

Question

Мне нужна помощь, чтобы разместить текст внутри его собственной высоты. Мне нужно прикрепить текст к верхней части контейнера (как показывает стрелка). Какое свойство css используется для этого? Почему высота H1 больше самого текста? Я обязательно применил поля и отступы 0.

введите описание изображения здесь

Answer 1

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

Он существует как сверху, так и снизу, чтобы учитывать типографику c восходящие элементы (верхняя часть строчной буквы «l» или «f» и подстрочные элементы (нижняя часть строчной буквы «y» или «g»), выходящие за базовую линию и высоту символов по оси x.

Вы можете удалить некоторые этой высоты с помощью CSS, отрегулировав line-height

h1 {
  line-height: 1;
}

или даже отрицательные числа

h1 {
  line-height: -0.5;
}

Ваш снимок экрана показывает то, что я ожидал бы в качестве желаемого поведения, когда значок и текст выровнен друг с другом. При этом вы можете перемещать текст (независимо от фактического размера элемента), используя отрицательные поля или абсолютное позиционирование.

h1 {
 margin-top: -5px;
 /* moves the text up 5 px */
}

h1 {
 /* takes the h1 out of the normal flow */
 position: absolute;
 top: -5px;
}