Ответ 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.