標籤：nbsp otto sub 文本 padding 自己的 概念 使用 height
一、line-height文法
line-height屬性的具體定義列表如下：
文法： line-height : normal | <實數> | <長度> | <百分比> | inherit
說明： line-height 屬性設定行間的距離（行高），不能使用負值。該屬性會影響行框的布局。在應用到一個區塊層級元素時，它定義了該元素中基準之間的最小距離而不是最大距離。line-height 與 font-size 的計算值之差(行距)分為兩半，分別加到一個文本行內容的頂部和底部。可以包含這些內容的最小框就是行框。
可能的值：
| 值 | 說明 |
| normal | 預設,設定合理的行間距。 |
| number | 設定數字，此數字會與當前的字型尺寸相乘來設定行間距。相當於倍數 |
| length | 設定固定的行間距。 |
| % | 基於當前字型尺寸的百分比行間距。 |
| inherit | 規定應該從父元素繼承 line-height 屬性的值。 |
二、line-height中頂線、中線、基準、底線的執行個體說明
HTML 程式碼 複製<!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=""> <span style="font-size:3em;">中文English</span> <span style="font-size:3em;">English中文</span> </div> </div> </body><html>
圖示說明
從上到下四條線分別是頂線、中線、基準、底線，很像才學英語字母時的四線三格，我們知道vertical-align屬性中有top、middle、baseline、bottom，就是和這四條線相關。
尤其記得基準不是最下面的線，最下面的是底線。
三、line-height中行高、行距與半行距
行高是指上下文本行的基準間的垂直距離，即圖中兩條紅線間垂直距離。
行距是指一行底線到下一行頂線的垂直距離，即第一行粉線和第二行綠線間的垂直距離。
半行距是行距的一半，即地區3垂直距離/2，地區1，2，3，4的距離之和為行高，而地區1，2，4距離之和為字型size，所以半行距也可以這麼算：（行高-字型size）/2
圖片說明
四、line-height中內容區、行內框、行框
內容區：底線和頂線包裹的地區，即深灰色背景地區。
行內框，每個行內元素會產生一個行內框，行內框是一個瀏覽器渲染模型中的一個概念，無法顯示出來，在沒有其他因素影響的時候（padding等），行內框等於內容地區，而設定行高時行內框高度不變，半行距【（行高-字型size）/2】分別增加/減少到內容地區的上下兩邊（深藍色地區）
行框（line box），行框是指本行的一個虛擬矩形框，是瀏覽器渲染模式中的一個概念，並沒有實際顯示。行框高度等於本行內所有元素中行內框最大的值（以行高值最大的行內框為基準，其他行內框採用自己的對齊向基準對齊，最終計算行框的高度），當有多行內容時，每行都會有自己的行框。
例如
<div style="">
<span style="font-size:1em;">中文English</span>
<span style="font-size:3em;">中文English</span>
<span style="font-size:3em;">English中文</span>
<span style="font-size:1em;">English中文</span>
</div>
圖片說明
五、定義line-height的方式
1、line-height可以被定義為normal。
body { line-height:normal; }
2、line-height可以被定義為繼承
p { line-height:inherit; }
3、line-height可以使用一個百分比的值
p { line-height:120%; }
4、line-height可以被定義為一個長度值（單位px、em等）
p { line-height:20px; }
5、line-height也可以被定義為純數字（甚至沒有單位）
p { line-height:1.2; }
css行高line-height的用法
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
