相關概念：
leading（行間距）：指填充在兩行文字間的鉛條，等于line-height 和 font-size之差，其中一半leading加到文字上方，另一半leading加到文字下方，只用于非替換元素。

em框：em框指示沒有行間距時基線之間的距離，不指定字符間的邊界，實際的字形可能比其em框更高或更矮。

font-size ：確定給定字體的em框（em box）的高度，但不能保證實際顯示的字符就是這種大小。font-size屬性和實際字體大小的具體對應關系由字體的設計者確定。

基線：the line upon which most letters sit and below which descenders extend，并不是漢字的下端沿，而是英文字母 x 的下端沿。

內(nèi)容區(qū)（content area）：非替換元素即em框串在一起組成的框，間接由font-size確定；替換元素：即元素固有的高度加可能的邊距和框。

行內(nèi)框（inline box）：虛擬的矩形框，無法顯示，大小為內(nèi)容區(qū)加leading。對非替換元素，等于line-height值；對替換元素，等于內(nèi)容區(qū)的高度。同一行內(nèi)的若干元素可以有不同的行高和行內(nèi)框高。

行框（line box）：包含該行內(nèi)所有行內(nèi)框的最高點和最低點的最小框，行框的高度只同本行內(nèi)元素的行高有關，而和line-height無直接關系，和父元素的高度（height）也無關。行內(nèi)框在行中根據(jù)其vertical-align屬性值垂直對齊。

匿名文本：指所有未包含在行內(nèi)元素中的字符串。

line-height：指文本行基線之間的距離，確定了各個元素框增加或減少多少，默認為元素本身字體大小的1.2倍。

line-height值從父元素繼承時，要繼承在父元素上計算的值，而不是在子元素上計算的值（em等）。如果是縮放因子（沒有單位的純數(shù)字值），則繼承的是縮放因子，不是計算的值，最終會計算縮放因子和子元素的font-size的乘積。

圖1：

圖2：css中的線

圖3：確定行框高

替換元素
替換元素的邊距和邊框會影響該元素的行內(nèi)框，繼而影響行框的高度。
其內(nèi)容不受CSS視覺格式化模型控制的元素,比如 img 、 input 、 textarea 、 select 、 object ，標簽起到占位符的作用，實際內(nèi)容不在文檔中，叫做替換元素。瀏覽器會根據(jù)元素的標簽類型和屬性來顯示這些元素。比如,img元素的內(nèi)容通常會被其src屬性指定的圖像替換掉。替換元素通常有其固有的尺寸:一個固有的寬度,一個固有的高度和一個固有的比率。比如一幅位圖有固有用絕對單位指定的寬度和高度,從而也有固有的寬高比率。另一方面,其他文檔也可能沒有固有的尺寸,比如一個空白的html文檔。
CSS渲染模型不考慮替換元素內(nèi)容的渲染。這些替換元素的展現(xiàn)獨立于CSS。object,video,textarea,input也是替換元素,audio和canvas在某些特定情形下為替換元素。使用CSS的content屬性插入的對象是匿名替換元素。

非替換元素

替換元素之外的所有其他元素都是非替換元素,實際內(nèi)容在文檔流中，由CSS的視覺格式化模型負責非替換元素的渲染。
非替換元素的邊距和邊框不會影響行元素行內(nèi)框的高度。

vertical-align：垂直對齊，只適用于行內(nèi)元素、替換元素和表單元格，不能被繼承。
默認值為baseline，將行內(nèi)元素的基線和所在行的基線對齊；文本都是按基線對齊的。如果一個垂直對齊元素沒有基線，比如圖像、表單輸入元素或其他替換元素，則把該元素的底端與其父元素的基線對齊。

There is space below that line for the descenders you find onletters like f, j, p and q.修復方法：通過設置圖片的vertical-align的屬性值或改變dislay:block；或者修改父元素的font-size/line-height使行內(nèi)框的高度小于圖片。在父元素的font-size:0;的極端情況下，中線和基線會重合。
bottom：將元素行內(nèi)框的底端和行框的底端對齊。
middle：把行內(nèi)元素框的中線與基線上方0.25em處的一個點對其，也等于與基線的距離為小寫字母x高度的一半（即0.5ex）。x字符的中點并不是內(nèi)容區(qū)的絕對中線，因為x字符會有所下沉。
百分數(shù)：相對于元素的line-height計算。行內(nèi)可替換元素的line-height的作用就是幫助計算vertical-align。
具體長度的值：把一個元素相對于父元素基線升高或降低指定的距離。垂直對其的文本并不會覆蓋其他行的文本，只會影響當前行的行高，以使足以包含最高行內(nèi)框的頂端和最低行內(nèi)框的底端。

行內(nèi)塊：inline-block，行內(nèi)塊元素會作為替換元素放在行中，即行內(nèi)塊的底端默認放在文本行的基線上。ie6/ie7要使用{display:inline; zoom:1;...}才生效。通常用于橫向菜單列表或不等高列表元素整齊排列。但是li標簽之間的空格會當作inline元素在頁面顯示4px的空白，可以通過父元素font-size:0,子元素font-size:12px;消除空白。對于ie6/ie7/safari需要使用word-spacing和letter-spacing加以調(diào)整。

行內(nèi)塊默認是baseline對齊，但是baseline的確定有特殊規(guī)定。Thebaseline of an inline-block is the baseline of its last line box in thenormal flow, unless it has either no in-flow line boxes or if its overflow property has a computed value other than visible , in which case the baselineis the bottom margin edge.所以會出現(xiàn)如下圖顯示的布局，可以通過改變vertical-align:top;修復。

以上就是css中的線及vertical-align實例詳解的詳細內(nèi)容，html教程

鄭重聲明：本文版權歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。