垂直對齊：基線外元素怪高度

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像素。字體的設計使得有一個盒子可以容納字符，而字形/字符則位於該盒子內。

計算出的整體框高度實際上是行高（100px）加上不同的是字形框的高度，它比字體大小的尺寸略小。

注意，如果上設置的垂直對齊值top（或bottom）：

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

則計算高度爲100像素，在指定行的高度。

，爲什麼這工作方式是這樣的細節在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>