1，行高的定義
#行高是指行間的距離，也就是基準之間的距離，而只有兩行文字才會存在兩個基線，那麼為什麼單行文字還具有行高？我們懷著這個疑問往下看。
2，行內框盒子模型
#這是一個單行文字，這裡有一個內容區標籤。
#圖一
「內容區域」 (content area )是圍繞文字的盒子，我們可以看做是滑鼠在選取文字區域的大小，它的大小只和font-size有關，可以看做是圖一中的文字被滑鼠選取的區域，也就是選取的「個單行文字」的區域。
「內嵌盒子」(inline boxs)不會讓文字成塊顯示，而是排列成一行。由內聯元素包裹的文字如span標籤包裹的“內容區”，可以稱之為“內聯盒子”，而沒有內聯元素包裹的部分，我們可以看做是“匿名內聯盒子」。 「內嵌盒子」可以看做圖一中span標籤內的「內容區」區域，而「匿名內嵌盒子」則可以看做紅色虛線包裹的內容。
“行框盒子”(line boxs)，每一行都是一個“行框盒子”，行框盒子由一個個匿名和非匿名內聯盒子組成。可以看做圖一中最外側紅色實線包裹的區域。
「包含盒子」(containing box)，此盒子由一個個「行框盒子組成」。
3，行高的高度機制
行高影響無所不在，即使是單行文字也不例外。
單行文字的高度表現只是受到line-height的影響，而主要是受到內容區域和行間距的影響。
單行文字行高：
line-height = 內容區域高度+ 行間距高度
那麼：
行間距= line-height - 內容區域高度
我們平常看到的文字上部與「行框盒子」的頂部之間的距離就是半行間距。
4，行高的單位
(1)，number
例如：
line-height:2;
font-size:20px;
登入後複製
那麼此時文字佔據的高度為20*2=40px
(2)，length
例如：
font-size:20px;
line-height:20px;
line-height:2em;
line-height:3rem;
line-height:3pt;
登入後複製
以px為單位有一個固定的值，而其餘的則需要結合瀏覽器預設尺寸進行換算或是body的font-size屬性來計算。
(3)
<p>
文字文字
<p>这是p标签</p>
</p>
p{
font-size:20px;
line-height:150%;
}
p{
font-size:50px;
}登入後複製
那麼「文字文字」的行高為30px，內部p標籤行高也是30px，而不會根據子元素重新計算行高。
意思是說當設定行高為百分比的時候，父元素根據font-size計算的行高繼承給子元素，子元素不會根據font-size重裝計算行高，一般不常用。
(4)，normal
根據瀏覽器預設line-height屬性來設定行高。
(5)，inherit
行高繼承IE8+
繼承父元素的行高設置，通常是應用在一些input和button標籤。
5，line-height的應用
(1)，消除容器中圖片與底部的間距
圖二
產生原因：
內嵌元素預設基線對齊，空白標籤內含有空白幽靈節點，相當於圖片和一個文字對齊，根據vertical-align:baseline，所以圖片底部有間距。
這裡的幽靈空白節點我們可以理解成一個字母c，因為是基線對齊，且父元素沒有設定固定高度，所以父元素高度由內容填充，由於c要與圖片基線對齊，所以就會在下邊緣。
當父元素設定固定的高度時，單純p內包含圖片和字母c,預設圖片與文字基線對齊，圖三中c就相當於幽靈空白節點。
圖三
消除方法
1，讓圖片塊狀化
#2，圖片vertical-align:bottom
#
3，让匿名空白节点line-height:0
(2)，小图标大文字
<i class='icon'></i>
<span>这是span标签内的文字</span>
span{
line-height:30px;
vertical-align:middle;
}
i{
vertical-align:middle;
}登入後複製
(3)，图片水平垂直居中
图三
图四
原理：
空白p内存在空白幽灵节点(看不见摸不着但存在空白元素中，例如图四中的)。
当设置text-align的时候，内联元素文字和图片会居中显示，我们让空白幽灵节点的行高与p高度一致，这样就可以实现垂直居中，图片和幽灵空白节点默认基线对齐，这时图片将偏上显示，我们设置图片的vertical-align为middle就可以实现图片近似居中的效果了。
如果想让图片完全垂直居中，我们可以让p的font-size:0，原因是不同字体的显示效果不同，有的下沉，有的刚好中线对齐，当font-size:0的时候，文字就变成一个点了，也就不存在不同字体的差异了。
(4)，多行文本垂直居中
图五
图六
原理：
我们可以把span看做是图片，这样原理就和图片垂直居中原理大同小异了。就是需要将span的元素display设置成inline-block，并且重置line-height和text-align。
为何display不能是inline属性，个人观点，如果还是inline元素的话，由于此时父元素的line-height过高，子元素设置的行高很小就没有作用（因为line-height达不到父元素行高的高度，所以看上去好像是无效的），类似于margin中的由于浮动或者绝对定位的无效的原因，我在另外margin篇有介绍，css中margin的深入了解，如果有兴趣可以去看看，如果设置子元素line-height设置很大的话是有作用的，所以只能让span元素为inline-block元素，inline-block具有包裹性,所以呈现出图六效果。
如果容器是自适应高度的，无法获得高度，那么我们可以让外部容器为表格元素居中。
【相关推荐】
1. 免费css在线视频教程
2. css在线手册
3. php.cn独孤九贱（2）－css视频教程
以上是必須掌握的css屬性--lineheight的詳細內容。更多資訊請關注PHP中文網其他相關文章！
