Откуда берется лишнее пространство по высоте у строчных элементов?

Question

[Кирилл Гладиков]

Помоги понять как строчные элементы формируют свою высоту.
ссылка
Размер шрифта 16px, межстрочный интервал 24px.
Почему размер строчных элементов 17px?

Answer 1

[Сергей Горячев]

Ширина и высота строчных элементов зависит от контента только.
При указании padding он добавляется к высчитанной высоте или ширине.
Высчитывается это браузером, при чем каждым по-своему.
Например, у меня в браузере не 17 пикселей, а 19 пикселей тот же span.
Тут нет четких формул, чтобы сказать плюс-минус.

Comments

[Кирилл Гладиков]

Проверил в лисе и так же получил 19px. Вы не знаете с чем это связанно? Может где нибудь в документации мельком написано. А то получается какое то нестандратное поведение.

[Сергей Горячев]

Кирилл Гладиков: да нет никакой документации на эту тему. Просто "высота и ширина span зависит от контента". Разные показатели зависят от разного шрифта, разного рендеринга (в разных браузерах). Лечится это только приведением к одному шрифту, к одному line-height, можно строчные элементы делать строчно-блочными (inline-block). А в остальном, это просто особенности браузеров.

Answer 2

[whoisthere]

Line Height

Это расстояние, также может зависеть от начертания шрифта.

-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;

Должно вылечить.

Юзайте нормалайз. Избавит Вас от магии вне Хогвартса.
Normalize

Comments

[Кирилл Гладиков]

line-height 24px, шрифт 16px. Вопрос как получилось 17px

[whoisthere]

Кирилл Гладиков: https://fiddle.jshell.net/dkp0xwu0/2/

[Кирилл Гладиков]

whoisthere: нормалайзом я пользуюсь. Это не избавляет от лишнего расстояния.
В демке вы сделали span inline-block-ом. Меня же интересует принцип отрисовки строчных элементов. Из за чего он делает это лишнее расстояние.

[Кирилл Гладиков]

whoisthere: И если нужно избавиться от лишнего пространства у inline-block, то нужно указать line-height : 1;
https://fiddle.jshell.net/dkp0xwu0/4/

[whoisthere]

Кирилл Гладиков: Почитайте здесь https://developer.mozilla.org/ru/docs/Web/CSS/text...

Answer 3

[Сергей Тутуков]

1. Это line-height;
2. Сам шрифт codepen.io/STutukov/pen/apEBRm?editors=1100

Comments

[Кирилл Гладиков]

Вы используете блочные элементы, а не строчные.

Answer 4

[Егор Живагин]

Каждый браузер ставит свой line-height всем элементам. Чтобы избежать этого, просто укажите свой)

Comments

[Кирилл Гладиков]

строчные элементы не дают поставить line-height меньше родителя (inline-block дает такую возможность)

[Егор Живагин]

Кирилл Гладиков: протестил сейчас на p . Это же строчный элемент? Всё отлично меняется, даже если у родителя больший line-height

[Кирилл Гладиков]

абзац это блочный элемент