Font-size vs line-height vs фактическая высота

Итак, этот говорит, что font-size определяет высоту поля, чтобы все буквы (с восходящими и спусками) могли поместиться.

Но почему имеет span с 40px font-size и line-height фактический размер 45px? Если я правильно понял связанный вопрос, тогда "X" должен быть меньше 40 пикселей, но общая высота должна быть ровно 40 пикселей. Я подумал, что, возможно, это делает дополнительную комнату выше/ниже подступников/спусков, но изображение показывает, что восходящие/спусковые крючки занимают все пространство, поэтому не может быть много лишней комнаты:

Когда я обертываю div (зеленый) вокруг span, тогда div имеет высоту 40 пикселей. Почему div использует font-size своего дочернего элемента для его высоты, но сам ребенок не работает?:

Теперь, когда я устанавливаю span line-height на 15px (меньше, чем font-size), высота div изменяется на 26px. Как рассчитывается это значение? Это что-то связано с базовым уровнем?:

Когда я устанавливаю span line-height на 65px (больше, чем font-size), тогда высота div является высотой line-height. Я бы ожидал, что высота div будет чем-то вроде (65px - 45px) + 45px.:

Итак, как font-size и line-height влияют на фактические высоты элементов? Я прочитал некоторые вопросы, которые ссылались на спецификацию, но я не мог много сделать. Есть ли какие-либо легко понятные правила?

Fiddler

Ответ 1

Во-первых, я рекомендую прочитать мой ответ в Встраиваемых элементах и высоте строки. Подводя итог, существуют различные высоты, относящиеся к встроенным блокам:

Высота встроенного блока, заданного line-height
Высота строки строки, которая в простых случаях также задается line-height, но не здесь.
Высота области содержимого встроенного блока, которая зависит от реализации. Это область, окрашенная красным фоном.

Другая высота в вашем случае - это высота родительского div. Это определяется §10.6.3. В этом случае, поскольку в поле устанавливается встроенный контекст форматирования с одной строкой,

Высота элемента - это расстояние от верхнего края содержимого до [...] нижнего края последней строки строки

Таким образом, высота родительского блока определяется высотой строки строки.

Что здесь происходит, так это то, что высота строки строки не является line-height вашего встроенного блока. И это потому, что line-height родительского блока также учитывается:

На заблокировать контейнерный элемент, содержимое которого состоит из inline-level, 'line-height' задает минимальную высоту строк в элементе.

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

Мы называем это мнимое поле "стойкой".

Если вы установите parent line-height в 0 и child vertical-align, например, top, то высота родительского элемента будет именно тегом line-height для ребенка.

.outer {
  margin-top: 50px;
  background-color: green;
  width: 150px;
  font-family: "Times New Roman";
  line-height: 0;
}
.letter-span-1 {
  background-color: red;
  line-height: 40px;
  font-size: 40px;
  vertical-align: top;
}
.letter-span-2 {
  background-color: red;
  line-height: 15px;
  font-size: 40px;
  vertical-align: top;
}
.letter-span-3 {
  background-color: red;
  line-height: 65px;
  font-size: 40px;
  vertical-align: top;
}

<span class="letter-span-1">XxÀg</span>
<div class="outer">
  <span class="letter-span-1">XxÀg</span>
</div>
The parent block is 40px tall.
<div class="outer">
  <span class="letter-span-2">XxAg</span>
</div>
The parent block is 15px tall.
<div class="outer">
  <span class="letter-span-3">XxÀg</span>
</div>
The parent block is 65px tall.

Ответ 2

Введение

Хороший вопрос,

Я изучаю большинство этих вещей через личный опыт.

В этом случае высота DIV устанавливается на авто. Он будет определять высоту своего содержимого и оценивать его новую высоту.

Ясно, что DIV учитывает только высоту строки. Вероятно, это связано с разным количеством шрифтов. Line-height дает нам возможность адаптации для различных типов шрифтов.

Короче

размер шрифта

Размер шрифта изменяет только фактический шрифт, а не элементы div вокруг него

высота строки

Линейная высота - это высота фактической линии и изменяет элементы div вокруг нее

Подождите секунду...

Если у нас есть что-то вроде этого:

div {
  background: green;
  margin-top: 50px;
}
.test-one {
  font-size: 20px
}
.test-two {
  font-size: 40px
}

<div>
  <span class="test-one"> test one </span>
</div>

<div>
  <span class="test-two"> test one </span>
</div>