#html #css
#HTML #css
Вопрос:
У меня есть div с размером шрифта 88 и высотой строки 88. Текст внутри div имеет высоту выше 88. Почему это?
<div style="font-size:88px;line-height:88px;">I need <span sytle="color:red;">videos</span></div>
Если вы откроете инспектор элементов и выделите родительский div, его высота составит 88 пикселей. Однако, если вы выделите текст «Мне нужно» и вложенный интервал, высота составит 101 пиксель. Это остается верным, даже если вы задаете высоту строки для самого диапазона:
<div style="font-size:88px;line-height:88px;">
I need <span style="font-size:88px;line-height:88px;color:red;">videos</span>
</div>
Смотрите прикрепленный repl: https://repl.it/@teeej/ReliablePunctualRam
Комментарии:
1. во-первых, вам не хватает «в вашем стиле span
2. @Icewine Исправлено, но это никак не повлияло на мой вопрос, и проблема все еще остается.
Ответ №1:
<span>
по умолчанию является встроенным элементом.
Если вы ожидаете, что он будет вести себя как встроенный блочный элемент, вы должны присвоить ему display
значение inline-block
, и он будет иметь высоту ровно 88px
:
div > span {
display: inline-block;
background-color: rgba(255,0,0,.1);
}
<div style="font-size:88px;line-height:88px;">
I need <span style="font-size:88px;line-height:88px;">videos</span>
</div>
Для лучшего понимания последствий display
свойства я рекомендую рекомендацию кандидата. И вот текущая (официальная) рекомендация.
Комментарии:
1. Почему элемент span получает другую высоту, когда для него установлено значение inline?
2. Простой ответ: потому что так работает встроенный контент. Технический ответ можно найти в документах для встроенного форматирования и высоты строки .
3. @AndreiGheorghiu Хорошо, да, я понимаю это, почему «Мне нужно» отображается в инспекторе с кавычками и все еще имеет высоту 101? Смотрите изображение: imgur.com/a/i2B98In
4. Потому что Chrome теперь предоставляет вам информацию о текстовых узлах, содержащихся в элементах уровня блока, как будто они будут отдельными элементами (это отдельные узлы, но они не являются элементами HTML). Однако текстовый узел является встроенным элементом, но не путайте его с
<div>
самим собой, высота которого равна ровно88px
.5. @AndreiGheorghiu Есть какой-нибудь способ обойти это? Моя проблема в том, что я устанавливаю событие щелчка в тексте «Мне нужно», но оно располагается непосредственно под другим элементом с событием щелчка. Но поскольку текст «Мне нужно» все еще читается с разрешением 101px, он перетекает в элемент выше и делает событие click неточным.