Как рассчитать высоту встроенного элемента

У меня есть элемент span со следующим CSS:

span.test {
  font-size: 20px;
  line-height: 1;
}

Почему вычисленная высота диапазона кажется 22px? Откуда берутся эти 2 дополнительных пикселя?

enter image description here

Можно ли сделать его высоким 20px без использования inline-block?

Вот простой jsbin, который я использовал для тестирования: http://jsbin.com/tigevecemoco/1/edit

Ответы

Ответ 1

Спецификация CSS 2.1 говорит:

10.6.1 Встроенные, не замененные элементы

Свойство 'height' не применяется. Высота области содержимого должна основываться на шрифте, но в этой спецификации не указывается, как.

Как это бывает, высота, в отличие от высоты строки, не замещенного встроенного элемента, очень мало влияет на что-либо еще, поэтому браузеры могут свободно сообщать о том, что им нравится здесь.

Однако небольшая обратная инженерия может быть поучительной.

Если мы посмотрим на метрики шрифтов для Times New Roman, мы увидим EM размер 2048, WinAscent 1825 и WinDescent 443. Суммируйте восхождение и спуск, разделите его на размер EM, умножьте на размер шрифта (20px ) и округляем до целого числа, и получаем 22px.

Взяв Arial в качестве другого шрифта, мы имеем размер EM 2048, WinAscent 1854 и WinDescent 434. Повторите расчет, и мы снова получим 22px.

А как насчет другого шрифта? Tahoma имеет размер EM 2048, WinAscent 2049 и WinDescent 423. Повторите расчет, и на этот раз мы получим 24px. И эй престо, если вы попробуете свой JsBin с шрифтом Tahoma, Firefox действительно показывает высоту 24px.

Метки шрифта выше были получены при загрузке шрифтов в Type Light 3.2.

Не убедительно, но разумное предположение о том, как все это работает.

Возможно ли сделать его высоким 20px без использования встроенного блока?

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

Ответ 2

Я не мог найти ответ на вопрос, почему он применяется. Я нашел много форумов с тем же вопросом...

Но, как ответ на ваш запрос:

Возможно ли сделать его высоким 20px без использования встроенного блока?

Мне удалось сделать это только путем плавания элемента. Кажется, что он потерял все, что было, это было дополнением... Затем установка line-height в конкретный 20px заставляет его работать. 

span.test {
  font-size: 20px;
  line-height: 20px;
  float: left;
}
<span class="test">A</span>

Ответ 3

try use "line-height"

' line-hieght: 1' наследуется от родителя. попробуйте собственную линейную высоту.

Ответ 5

Я использовал JS Bin http://jsbin.com/siqabekoloja/1/edit, чтобы решить вашу проблему. Я смог согласовать его в IE, Chrome и Firefox. Я считаю, что проблема заключается в том, что вам нужно, чтобы элемент был блокирован не встроенным элементом.

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