理解line-height

line-height：指的是行高；也就是兩行文字基線之間的距離，取值爲：line-height:base-line/bottom/middle/數值/百分比/normal/inherit/；默認值爲base-line;

其相關知識點主要有一下幾點：

一、內聯元素的高度由line-height決定，而不是由font-size決定；

二、行高=內容區域高度+行間距；而行間距又可分爲半行間距，分佈在內容區域上下；

三、在SimSun字體下，內容區域高度爲font-size;

四、多行文本的高度由單行文本高度累加；

五、在文本比較多的網頁中，如博客，line-height一半設置爲1.5/1.6；在通常的商業網站中，line-height通常設置爲=20px/font-size;

圖片在文本框中，通常下面會流出一些距離，那是由於基線的問題，等於半行邊距；要消除那半行間距的方法有：

一、圖片塊狀化：display:block;

二、圖片與底線對齊：vertical-align:bottom;

三、行高足夠小：基線位置上移，通常10px如下就行；

利用line-height實現大小不固定的圖片垂直居中：

.box{line-height:300px;text-align:center;}
.box>img{vertical-align:middle;}