вертикального выравнивания: базовый наружный элемент странно высота

Question

вот HTML код ниже:

<div class="container"> 
    no Text 
    <span class="base">baseline align</span> 
</div> 

код CSS:

div { 
    font-size: 20px; 
    line-height: 100px; 
    outline: 1px solid red; 
} 
span { 
    font-size: 40px; 
    display: inline-block; 
    background: wheat; 
} 

мой вопрос, почему высота контейнера элемента 107px, не 110px.

containerHeight = lineHeight + (spanFont - divFont)/2 = 100px + 10px = 110px 

• есть ли случилось с моим calulation?

• здесь скрипка: https://jsfiddle.net/zhouxiaoping/46wuvm3x/3/

Answer 1

Рассмотрим фрагмент кода, воспроизведенный ниже, и смотреть на желтый, правой рукой элемент, который имеет font-size: 50px и line-height: 36px. Обратите внимание, что хотя размер шрифта 50 пикселей, вертикальное пространство, занимаемое символом (глифом), меньше 50 пикселей, более чем 36 пикселей. Шрифты сконструированы так, что есть поле, в котором хранятся символы, а глифы/символы расположены внутри этого поля.

Вычисленная общая высота коробки - это высота линии (100 пикселей), а разница - это высота символов глифов, что немного меньше размеров шрифта.

Обратите внимание, что если установить значение вертикального выравнивания к top (или bottom) на:

<span class="top">baseline span Text</span> 

то вычисленная высота 100px, заданная высота строки.

Подробности о том, почему это работает так, как это делает находится в спецификации CCS2:

http://www.w3.org/TR/CSS21/visudet.html#line-height

В частности, часть о ведущих и полугабарит.

$(document).ready(function() { 
 
    var $container = $('.container'); 
 
    var divHeight = $container.height(); 
 
    $('.info').html('container is ' + divHeight + 'px'); 
 
})

div { 
 
    font-size: 20px; 
 
    line-height: 100px; 
 
    outline: 1px solid red; 
 
    position: relative; /* for demo only */ 
 
} 
 
span { 
 
    font-size: 40px; 
 
    line-height: 100px; /* this value is inherited, I show it explicitly */ 
 
    display: inline-block; 
 
    background: wheat; 
 
} 
 

 
/* the following for demo purposes... */ 
 
.info { 
 
    font-size: 20px; 
 
    line-height: 1; 
 
    background-color: yellow; 
 
} 
 
.top { 
 
    vertical-align: top; 
 
} 
 
.base { 
 
    vertical-align: baseline; 
 
} 
 
.line-50 { 
 
    position: absolute; 
 
    border-top: 1px dashed blue; 
 
    outline: none; 
 
    top: 50%; 
 
    left: 0; 
 
    width: 100%; 
 
} 
 
.box-50 { 
 
    position: absolute; 
 
    outline: none; 
 
    bottom: 50%; 
 
    right: 0; 
 
    width: 100px; 
 
    background-color: yellow; 
 
    font-size: 50px; 
 
    line-height: 36px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<span class="info">x</span> 
 
<br> 
 
<br> 
 
<div class="container"> 
 
    test text 
 
    <span class="base">baseline span Text</span> 
 
    <div class="line-50"></div> 
 
    <div class="box-50">Xey</div> 
 
</div>