頂線登夫、中線、基線允趟、底線
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style type="text/css" >
span
{
padding:0px;
line-height:1.5;
}
</style>
</head>
<body>
<div class="test">
<div style="background-color:#ccc;">
<span style="font-size:3em;background-color:#999;">中文English</span>
<span style="font-size:3em;background-color:#999;">English中文</span>
</div>
</div>
</body>
<html>
從上到下四條線分別是頂線恼策、中線、基線潮剪、底線涣楷，很像才學(xué)英語字母時(shí)的四線三格，我們知道vertical-align屬性中有top抗碰、middle狮斗、baseline、bottom弧蝇，就是和這四條線相關(guān)碳褒。
行高折砸、行距與半行距
行高、行距與半行距：
- 行高是指上下文本行的基線間的垂直距離沙峻，即圖中兩條紅線間垂直距離睦授。
- 行距是指一行底線到下一行頂線的垂直距離，即第一行粉線和第二行綠線間的垂直距離摔寨。
- 半行距是行距的一半去枷，即區(qū)域
3垂直距離/2，區(qū)域1是复，2删顶，3，4的距離之和為行高佑笋，而區(qū)域1翼闹，2，4距離之和為字體size蒋纬，所以半行距也可以這么算：（行高-字體size）/2猎荠。
內(nèi)容區(qū)、行內(nèi)框蜀备、行框
內(nèi)容區(qū)关摇、行內(nèi)框、行框：
內(nèi)容區(qū)：底線和頂線包裹的區(qū)域碾阁，即下圖深灰色背景區(qū)域输虱。
行內(nèi)框：每個(gè)行內(nèi)元素會(huì)生成一個(gè)行內(nèi)框，行內(nèi)框是一個(gè)瀏覽器渲染模型中的一個(gè)概念脂凶，無法顯示出來宪睹，在沒有其他因素影響的時(shí)候（
padding等），行內(nèi)框等于內(nèi)容區(qū)域蚕钦，而設(shè)定行高時(shí)行內(nèi)框高度不變亭病，半行距[（行高-字體size）/2]分別增加/減少到內(nèi)容區(qū)域的上下兩邊（深藍(lán)色區(qū)域）。行框（
line box）：行框是指本行的一個(gè)虛擬的矩形框嘶居，是瀏覽器渲染模式中的一個(gè)概念罪帖，并沒有實(shí)際顯示。行框高度等于本行內(nèi)所有元素中行內(nèi)框最大的值（以行高值最大的行內(nèi)框?yàn)榛鶞?zhǔn)邮屁，其他行內(nèi)框采用自己的對(duì)齊方式向基準(zhǔn)對(duì)齊整袁，最終計(jì)算行框的高度），當(dāng)有多行內(nèi)容時(shí)佑吝，每行都會(huì)有自己的行框坐昙。
line-height
line-height屬性設(shè)置行間的距離（行高），不能使用負(fù)值芋忿。該屬性會(huì)影響行框的布局民珍。在應(yīng)用到一個(gè)塊級(jí)元素時(shí)襟士，它定義了該元素中基線之間的最小距離而不是最大距離盗飒。line-height 與 font-size 的計(jì)算值之差(行距)分為兩半，分別加到一個(gè)文本行內(nèi)容的頂部和底部『穆蹋可以包含這些內(nèi)容的最小框就是行框吓妆。
| 值 | 說明 |
|---|---|
normal |
默認(rèn),設(shè)置合理的行間距。 |
number |
設(shè)置數(shù)字宣渗，此數(shù)字會(huì)與當(dāng)前的字體尺寸相乘來設(shè)置行間距抖所。相當(dāng)于倍數(shù) |
length |
設(shè)置固定的行間距 |
% |
基于當(dāng)前字體尺寸的百分比行間距 |
inherit |
規(guī)定應(yīng)該從父元素繼承 line-height 屬性的值 |
單行文字垂直居中
line-height的大小為元素的高度即可實(shí)現(xiàn)效果。
<div style="line-height:100px;border:dashed 1px #0e0;">
This is a test.
</div>
元素對(duì)行高影響
行框高度是行內(nèi)最高的行內(nèi)框高度痕囱，通過line-height調(diào)整田轧，內(nèi)容區(qū)行高與字體尺寸有關(guān)，padding不對(duì)行高造成影響鞍恢。
<div style="border:dashed 1px #0e0;margin-bottom:30px;">
<span style="font-size:14px;background-color:#999;">This is a test</span>
</div>
<div style="border:dashed 1px #0e0;">
<span style="font-size:14px;padding:20px;background-color:#999;">This is a test</span>
</div>
第二個(gè)
span雖然因?yàn)?code>padding原因內(nèi)容區(qū)變大傻粘，當(dāng)行高并未改變。
行高的繼承
行高是可繼承的帮掉，但并不是簡(jiǎn)單的copy父元素行高弦悉，繼承的是計(jì)算得來的值。
<div style="border:dashed 1px #0e0;line-height:1.5;font-size:10px;">
<p style="font-size:30px;">
1232<br/>
</p>
</div>
如果屬性值沒有單位蟆炊，則瀏覽器會(huì)直接繼承這個(gè)因子（數(shù)值）稽莉，而非計(jì)算后的具體值，此時(shí)它的line-height會(huì)根據(jù)本身的font-size值重新計(jì)算得到新的line-height值涩搓。
