Почему вложенный интервал внутри div не соответствует правилу высоты строки для этого div?

#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> по умолчанию является встроенным элементом.

Если вы ожидаете, что он будет вести себя как встроенный блочный элемент, вы должны присвоить ему 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 неточным.