Jump to content
  • 0

Как вычисляется высота блока текста из нескольких строк


GRIG
 Share

Question

Народ! Помогите советом, а то я уже мозг себе сломал.

Пишу на чистой странице простой код вроде вот такого:


<span>
Это какой-то проверочный текст
<br/>
разделенный на две строки
</span>

Выставляю ему font-size=72px и line-height=72px, потом смотрю в файрбаге высоту получившегося куска - получается 153 px. Получается вроде бы понятно: 72 пикселя на первую строку, еще 72 на вторую и плюс 1/8 высоты шрифта (т.е. 9 пикселей) на интервал между строками.

Лезу в разрабатываемый проект, где в блоке div записан текст из двух строк с точно такими же font-size=72px и line-height=72px, смотрю высоту - показывает 205 px. Убираю там одну из строк - высота становится 133px. Превращаю 2 строки в 3 - высота становится 277px. Мягко говоря, это никак не соответствует ожидаемому (хорошо хоть разница как раз на высоту шрифта в обоих случаях).

Спрашивается: где искать происхождение лишней высоты? (Найти очень нужно - мне этот кусок надо по вертикали выровнять, причем без яваскрипта.)

Версии:

1) Нестандартный подгружаемый шрифт... Где искать, какие эффекты он дает?

2) Вокруг отображаемого текста могут быть разные padding, border, margin - непохоже. Файрбаг, во-первых, показывает что их размеры все равны нулю. Во-вторых, при наведении мыши на соответствующий кусок кода файрбаг подсвечивает соответствующий кусок изображения сплошным цветом, без дополнительных цветных полос по краям. Но при этом под нижней строкой показывает кусочек экрана как относящийся к этому элементу.

3) Что-то еще... Что? Второй день сижу - понять не могу.

PS. Попробовал в разрабатываемом проекте вообще убрать line-height - получил, что высота блока из N строк для N = 1, 2, 3 получается в точности равна 133*N пискселов. Получается, что это свойство в фонте зашито?

Link to comment
Share on other sites

1 answer to this question

Recommended Posts

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy