分析css中行高的問題
在網頁中到底文字的行高是怎麼算的，先說理論重點，然後舉例說明：
本文重點是以下兩點：
第一點：針對中文字的行高，在這裡我推算了一個公式即使： 行高=文字大小+文字上下兩邊相等之和。
第二點：
設定行高後，文字處在行高的中間位置
解釋這個公式 :
文字大小，這個不用多說。文字上下兩邊相等值和是什麼意思？例如：文字的大小是20px，行高是80px,那麼文字所在位置是：距離上邊30px，距離下邊是30px。
因為文字設定行高時，永遠都是行高的居中位置。
- 舉個例子1：設定一個div的高度20px，文字為20px。根據公式推算：上下兩邊距為0。
如下程式碼：
樣式為：
div{
font-size:20px;
height: 20px;
line-height: 20px;
border:solid 1px red;
font-weight: "微軟雅黑";
}
程式碼結構：
<div>
請問您是二師兄嗎？
</div>
複製程式碼瀏覽器結果為：
- 舉個例子2：如果把div高度設定成50px，行高設定成30px。按照分析，行高為30px，文字大小佔20px，那麼文字距離上邊的距離為5px，距離下邊的距離也是5px。
程式碼如下：
結構程式碼：
<div>
請問您是二師兄嗎？
<span>
這個是下面一層的
</span>
</div>
樣式程式碼如下：
div{
font-size:20px;
height: 50px;
line-height: 30px;
border:solid 1px red;
font-weight: "微軟雅黑";
}
span{
display: block;
border:solid 1px black;
height: 16px;
font-size:16px;
line-height: 16px;
}
複製程式碼瀏覽器結果為：
所以css中的行高等於文字的高度加上上下兩邊相等的距離。