本文的重點是了解vertical-align和line-height的使用
涉及到的名詞：基線，底端，行內框，行框，行間距，替換元素及非替換元素，對齊。只有充分理解這些概念才會靈活運用這兩個屬性。
什么是對齊
對齊一定是涉及兩個對象：對齊元素以及要對齊的對象；比如在軍訓時教官喊稍息，我們每個人都會有一個參照的標准去站齊。
而行內元素的對齊，除了行內元素本身，還有一個參考系，這個參考系就是行框的基線，而行框的基線依據於行內框元素的基線位置。
什么是基線
每一個文本元素自身都會有四條線，頂線，中線，基線，底線。而基線一般是指文本元素中以x字母為准，x字母的下邊緣為該文本元素的基線。
而行高則是兩個文本行基線之間的距離，往往使段落產生間距。
但是也可以這樣理解，行高 = 字體大小 + 上半行距 + 下半行距（其中上下半行距相等，這個等式可以從圖中推導出來）
行高指的是文本行的基線間的距離，但是文本之間的空白距離不僅僅是行高決定的， 同時也受字號的影響。
每一個文本元素和文本行元素，都會有一條基線，基線的位置受到文本的字體格式以及line-height的影響。
line-heght的應用：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> span{ display: inline-block; height: 60px; width: 60px; background-color: grey; text-align: center; /*line-height: 60px;*/ line-height: 30px; color: rebeccapurple; font-size: 20px; word-break: break-all; } </style> </head> <body> <span>++++++++</span> </body> </html>
什么是行框和行內框
<p> <span>span</span> text <em>em</em> <i>yuan</i> </p>
在每一個段落行內，不同的行內元素除了包裹自身內容的內容框之外，還會自動生成一個行內框，其中沒有標簽包裹的文本會生成匿名行內框，不同的行內框會根據各自不同的line-height產生行間距，而行框則會剛好包括最高的頂端和最低的底端，從而來生成行框。
span{ display: inline-block; width: 50px; line-height: 80px; background-color: darkcyan; font-size: 20px; } em{ display: inline-block; width: 50px; line-height: 50px; background-color: rebeccapurple; } i{ display: inline-block; width: 50px; line-height: 30px; background-color: green; }
什么是替換元素
替換元素是指元素的內容本身並非文檔直接表現的，換句話說，就是不同的頁面中，瀏覽器不能確定其具體內容的元素，比如圖片，按鈕，因為圖片的內容取決於圖片引用的src屬性源，按鈕的類型則依據於其input類型，因此瀏覽器是不能確定今天img元素里面是一張美女圖片，那么明天加載的頁面里面img是不是一張美女圖片。
除了替換元素，其他的元素就是非替換元素。非替換元素和替換元素在行框中的影響，主要是其高度計算方式，替換元素在行框中的位置是由其height，padding和border來決定，而非替換元素在行框中的位置則是其line-height和字體樣式。
如果只有文本元素的話，那么行框是很好計算基線位置的，但是如果有圖片按鈕等替換元素的話，那么計算方式就會變的稍微復雜一些。
在css中，有兩種高度方式，一種是height，一種是line-height，這兩種會決定元素的高度和位置，對於圖片等行內替換元素來說，height是行框計算的依據，line-height對圖片、按鈕不會產生影響。
因此，如果有圖片在行內的話，那么圖片的底端會對齊文本的基線。
如果圖片的高度高於其他行內框的整體高度
圖片會在對齊原來的行框文本基線的基礎上，撐開高度，使行框最高點剛好包括圖片的頂端。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ line-height: 40px; } </style> </head> <body> <div class="test"> <span>span</span><em>em</em> </div> <div class="test"> <span>span</span><em>em</em> <img src="abc.png" alt="" width="50px" height="50px"> </div> </body> </html>
因此，當p段落里面的line-height都是40px的時候，加入圖片之后，行框的高度就會比沒有加入圖片之前多50px - 40px=10px高度，因此基線就會下移10px的高度。
對齊延伸問題：浮動對行內元素產生了什么樣的影響
設置一個元素的浮動之后，元素會從正常的文檔流中去除，但是同時也會對原來的文檔流產生一些影響。
可以設想一下，在長方形區域的水面上，有很多人都想要有一個固定位置的水床（瀏覽器盒模型布局），但是固定水床需要登記（告訴瀏覽器的如何布局計算）。突然有一天，有一個人想要在長方形區域的最左側建一個水床（設置元素左浮動），它悄悄地從水底移動到最左側，把原先的水床擠走（浮動元素會盡可能移動在到容器最高處，及最左處或最右處），在最左側那里建了一所水床，沒有登記（沒有告知父容器高度，因此產生高度塌陷）。其他的人不知道，在去最左端的固定水床的時候，發現已經有人固定了，因此只能固定在它旁邊（浮動會產生環繞效果，而這一點就是因為浮動元素從正常文檔流中去除掉的原因）。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> p{ line-height: 40px; border: 1px solid rebeccapurple; } img{ width: 100px; height: 100px; } </style> </head> <body> <p> <span>文本內容1</span> <em>文本內容2</em> <img src="abc.png" alt="高度圖片"> </p> </body> </html>
img設置float:left
圖片是屬於替換元素，在行框中的計算中，是依據於圖片的高度，如果圖片進行浮動的話，對於行框來說，圖片不存在了，因此，行框還是依據原來的文本行基線來計算基線，進行對齊。
對齊的過程
行內元素是默認設置的vertical-align為baseline，也就是基線對齊。當一個文本行開始渲染的時候，
1.首先瀏覽器會找出每一個元素的類型，是替換元素還是非替換元素
2.然后根據它們的height或者line-height以及字體大小來生成每個元素行內框
3.確定行內框基線位置，確定行框基線位置
4.根據每個元素是否設置vertical-align來進行對齊。
注意：vertical-align僅對inline-level和table-cell元素有效
下面示例無效是正常不過的：
<div> <div style="float:left;font-size:20px;vertical-align:middle;">I'm former</div> <div style="float:left;font-size:50px;vertical-align:middle;">I'm latter</div> </div>
練習
例1:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css中vertical-align和line-height的用法</title> <style> *{ margin: 0px; padding: 0px; } div{ background-color: aquamarine; font-size: 0; } img { width: 300px; /*vertical-align: top;*/ } </style> </head> <body> <div> <img src="abc.png" alt="picture"><span>span</span> </div> </body> </html> <!--解決方法：--> <!--（1）、將整個div內的font-size設置為0；--> <!--（2）、將圖片img變為塊級元素，即設置其為display:block;--> <!--（3）、給div設置一個行高（值盡量小些），設置為line-height:5px;--> <!--（4）、設置圖片img垂直對齊方式vertical-align,值為top/middle/bottom任意一個都可以（為了覆蓋默認的值baseline）;-->
例2:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css中vertical-align和line-height的用法</title> <style> *{ margin: 0px; padding: 0px; } .item1{ width: 100px; height: 100px; background-color: rebeccapurple; float: left; } .item2{ width: 100px; height: 100px; background-color: cornflowerblue; float: left; } .s1{ width: 100px; height: 100px; background-color: coral; display: inline-block; } .s2{ width: 100px; height: 100px; background-color: green; display: inline-block; margin-left: -5px; } </style> </head> <body> <!--塊級元素沒問題--> <div class="item1"></div> <div class="item2">item2item2</div> <span class="s1"></span> <span class="s2">span2</span> </body> </html>
參考文獻：http://www.jb51.net/css/29328.html
http://www.cnblogs.com/doctor-chen/archive/2016/11/09/6049374.html
http://www.cnblogs.com/fsjohnhuang/p/5307706.html