什么是行間距？

古時候我們是用印刷機來處理文字，印出來的每個字都位于獨立的一個塊里。

行間距，即傳說中控制兩行文字之間垂直距離的東東。

在CSS，line-height被用來控制行與行之間的垂直距離。

不過行間距與半行間距還是取決于CSS中的line-height。

那么如何來使用line-height？

默認狀態，瀏覽器使用1.0-1.2 line-height .這是一個初始值。

你可以定義CSS里的line-height屬性來覆蓋默認值

Css代碼 ?

p?{?line-height:140%;?}

p { line-height:140%; }

你可以用5種方式來定義line-height:

1、line-height可以被定義為normal。

Css代碼 ?

body?{?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; }

縮寫line-height

那5種line-height值也可以在font屬性里縮寫

line-height值緊跟著font-size值，使用斜杠隔開/

舉例來說......

值normal

body { font:100%/normal arial; helvetica, sans-serif; }

值百分比

body { font:100%/120% arial; helvetica, sans-serif; }

值長度

body { font:100%/20px arial; helvetica, sans-serif; }

值純數字

body { font:100%/1.2arial; helvetica, sans-serif; }

計算line-height

有些CSS屬性是可繼承(inherited)(從層疊的元素里傳遞下來)

這樣設計是為了方便開發者

于是他們不用為所有后代元素再設置一次

例如：color屬性是可繼承的。如果body被定義了color，那么它會傳遞給頁面里的所有元素

對于line-height繼承會有一點復雜

為了更好的演示line-height的各種用法

使用如下的HTML代碼

consect etuer adipi scing ....

Lorem ipsum dolor sit amet ....

Duis autem vel eum ....

這些代碼有著如下文檔樹結構

我們同時使用如下CSS

(注：文字大小使用像素是為了看起來簡單，盡管不推薦這么干！)

Css代碼 ?

body?{?font-size:16px;?line-height:XXX;?}

h1?{font-size:32px;}

p?{font-size:16px;}?#footer?{font-size:12px;}

body { font-size:16px; line-height:XXX; }

h1 {font-size:32px;}

p {font-size:16px;} #footer {font-size:12px;}

例1：值百分比

line-height被設置為百分比(120%)

Css代碼 ?

body?{?font-size:16px;?line-height:120%;?}

h1?{font-size:32px;}

p?{font-size:16px;}

#footer?{font-size:12px;}

body { font-size:16px; line-height:120%; }

h1 {font-size:32px;}

p {font-size:16px;}

#footer {font-size:12px;}

line-height的百分比(120%)和body的文字大小(16px)被用來計算值(16px*120%=19.2px)這個計算出來的值會被層疊下去的元素所繼承

所有繼承下來的元素會忽略本身的font-size，而使用相同的，計算出來的line-height.

line-height不會隨著相關的font-size做相應的比例縮放

例2、值：長度

line-height被設置成一個長度值(20px)

Css代碼 ?

body?{?font-size:16px;?line-height:20px;?}

h1?{font-size:32px;}

p?{font-size:16px;}

#footer?{font-size:12px;}

body { font-size:16px; line-height:20px; }

h1 {font-size:32px;}

p {font-size:16px;}

#footer {font-size:12px;}

長度值20px會被后代繼承

所有繼承下來的元素會忽略本身的font-size，而使用相同的，繼承的line-height

line-height還是不會隨著相關的font-size做相應的比例縮放

例3、值：normal

line-height被設置為normal(約為1.2)

Css代碼 ?

body?{?font-size:16px;?line-height:normal;?}

h1?{font-size:32px;}

p?{font-size:16px;}

#footer?{font-size:12px;}

body { font-size:16px; line-height:normal; }

h1 {font-size:32px;}

p {font-size:16px;}

#footer {font-size:12px;}

在本例中使用繼承的計算出來的值還不如用值normal，瀏覽器在解釋normal的時候會有細微差別。

現在所有繼承下來的元素不會忽略本身的font-size，而使用基于font-size算出來的line-height

現在，line-height會隨著相關的font-size做相應的比例放縮

但是，如果你既想要normal的靈活，又想要設置一個自定義的值這時候就得指望值：純數字

例4、值：純數字

line-height被設置為值：純數字(1.5)

Css代碼 ?

body?{?font-size:16px;?line-height:1.5;?}

h1?{font-size:32px;}

p?{font-size:16px;}

#footer?{font-size:12px;}

body { font-size:16px; line-height:1.5; }

h1 {font-size:32px;}

p {font-size:16px;}

#footer {font-size:12px;}

在本例中用繼承的計算后的值，倒不如用系數(1.5)

現在所有繼承下來的元素使用基于font-size算出來的line-height

再一次，line-height會隨著相關的font-size做相應的比例縮放

那么哪一種是最好的方案？

一般來說，設置行高為值：純數字是最理想的方式。因為其會隨著對應的font-size而放縮

在多種情況下，很難確定一個完美的line-height，但無論如何，保守估計標題是沒有段落那么的需要自適應line-height

舉例來說，所有內容被定義為1.5，標題被定義為1.2.

body {line-height:1.5} h1,h2,h3,h4,h5,h6 {line-height:1.2}

萬維網內容可存取性指南(WCAG)2.0規定“段落中的行距至少要1.5倍”，這意味著如果要達到AAA等級，行高應為1.5.

深入line-height

為了深入了解line-height,我們需要先來了解 CSS boxes的各種類型

我們從一段簡單的HTML代碼開始

The emphasis element is defined as "inline".

這些代碼在大多數瀏覽器下應該會被渲染成下圖

?這個例子中涉及到4個boxes

box類型1：containing boxes

這個例子中段落就是一種containing boxes，它包含了其他boxes。

box類型2：inline boxes

在段落內有一系列的inline boxes

?inline boxes 不會讓內容顯示成塊形式，而是排成一行。

emphasis 元素就是一種inline boxes

其他沒有特別標簽的box被稱為擬名inline boxes

?box類型3：line boxes

inline boxes在containing boxes里一個接一個組成了line boxes

?box類型4：content area

content area是圍繞著文字的看不見的一種box，他的高取決于font-size

?inline boxes與inline-height

行高基于一則簡單小配方，應用在inline boxes上。

1.line-height和font-size的差別可以從下面的例子中看出

例：

font-size:16px;

line-height:20px;

差別：4px(即行間距)

2.拆分行間距，來創建一個半行間距

4px行間距/2 = 2px半行間距

3.半行間距會被應用在content area 的頂部和底部

?但有的時候情況會有一點點的復雜

content box包裹著line box，而半行間距位于content box 的上部和下部。

然而有時候inline box 會小于content area！

舉例來說，如果line-height 小于 font-size，inline box 會優先于行高

例：

font-size:16px;

line-height:12px;

inline box 高度：12px

content area 會溢出，inline box的頂部和底部半行高會折疊起來以保證inline box的高度

?line box的一些注解

line box的高度取決于它內部最高的inline box (或被替換的元素)

最高的inline box 可以是匿名inline box

也是可以增加line-height后的inline box

?還可以是更大font-size的inline box

?或存在上標或下標

或，甚至存在可替換元素，例如一張圖

?line box在containing box寬度內靠著彼此的頸部堆積

最后，總結

上標和下標

上標和下標有時候會強制影響line box 使其高度異常。

?你可以把line-height設置為0來解決這個問題，那樣會移除元素的上下半行間距

sup,sub {ine-height:0;}

IE6,line-height和內聯圖片

IE5/6錯誤的移除了內聯圖片的頂部半行間距

?搞定這玩意兒，需要點技術含量。如果有必要的話，給圖片設置頂部的margin值，以模擬頂部半行間距。這個頂部的margin應該只針對于IE5/6(使用條件注釋)

總結

以上是生活随笔為你收集整理的html中高与行高的区别,深入了解css的行高Line Height属性的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。