vertical-aling與line-height

基線

baseline：字符x的底部

x-height: 字母x的高度，vertical-aling設置爲middle的時候，對齊的是baseline往上1/2的x-height，因此vertical-aling設置爲middle不是整正的居中對齊

​

line-height

1.內容高度

思考：未設置height的時候，可視高度由什麼決定？

.box {
    line-height: 0;
}
.box1 {
    line-height: 12px;
}
.box2 {
    line-height: 12px;
  font-size: 0;
}
<div class="box">
  內容內容
</div>

結果： 內容高度

元素的高度是由line-height撐起來

思考：對於非替換元素，line-height會影響元素高度嗎？

.box {
    line-height: 0;
}
.box1 {
    line-height: 120px;
}
<div class="box">
     <img src=''>
</div>

結果：替換元素內容高度

2.行距

兩行文字之間的間隙

​

4.line-height屬性值

normal:

默認是normal，與字體、瀏覽器有關，在1.2左右

長度值：

帶單位的，直接按照這個值進行計算

數值：

最終的計算值是和當前 font-size 相乘後的值

百分比：

最終的計算值是和當前 font-size 相乘後的值。

父元素設置了百分比，子元素繼承的不是百分比，而是父元素計算後的值

vertical-align

只能應用於內聯元 素以及 display 值爲 table-cell 的元素。

1.baseline

基線對齊

2.數值

相對基線上下移動

問題

1.不一樣字號文字在一塊兒時，內容高度

box { 
  line-height: 32px; 
}
.box > span { 
  font-size: 24px;
}
<div class="box">
    x<span>文字x</span>
</div>

​

文字默認是基線對齊，不一樣大小文字的基線對齊的時候，會發生上下惟一，若是惟一距離夠大，就會產生意料以外的高度

​

2.思考：box高度是多少

.box { 
  line-height: 32px; 
}
.box > span { 
  font-size: 24px; 
}
<div class="box">
 <span>文字</span>
</div>

結果：會比32px大一些

​

這是由於在 HTML5 文檔模式下，每個「行框盒 子」的前面都有一個寬度爲0的空白節點 - 幽靈空白元素，內聯特性表現和普通字符相同

等同於以下：

​
因爲空白節點的字體大小和元素內字體大小不一樣，致使發生位移，使元素高度撐高

幽靈空白節點還會帶來不少問題

如圖片高度問題：

​ ​

塊級元素高度老是會比圖片高度大一些，這是由於存在幽靈空白元素，因爲vertical-aling默認是baseline,致使空白元素撐高了塊級元素。