小編給大家分享一下CSS中l(wèi)ine-height屬性設(shè)置行間距的方法是什么，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

目前創(chuàng)新互聯(lián)建站已為1000多家的企業(yè)提供了網(wǎng)站建設(shè)、域名、雅安服務器托管、網(wǎng)站托管運營、企業(yè)網(wǎng)站設(shè)計、圍場網(wǎng)站維護等服務，公司將堅持客戶導向、應用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

CSS中行間距的實現(xiàn)需要line-height屬性。

字符間的間隔太大或者太窄有時可能不太確定，我們需要根據(jù)網(wǎng)站的需要來進行調(diào)整，而使用CSS的line-height屬性可以調(diào)整字符間的距離。

我們下面來看具體的示例

我們先來創(chuàng)建以下的HTML代碼（瀏覽器默認尺寸為16px）

HTML代碼

冬天的百草園比較的無味；雪一下，可就兩樣了。拍雪人（將自己的全形印在雪上）和塑雪羅漢需要人們鑒賞，這是荒園，人跡罕至，所以不相宜，只好來捕鳥。薄薄的雪，是不行的；總須積雪蓋了地面一兩天，鳥雀們久已無處覓食的時候才好。掃開一塊雪，露出地面，用一支短棒支起一面大的竹篩來，下面撒些秕谷，棒上系一條長繩，人遠遠地牽著，看鳥雀下來啄食，走到竹篩底下的時候，將繩子一拉，便罩住了。 
先生讀書入神的時候，于我們是很相宜的。有幾個便用紙糊的盔甲套在指甲上做戲。我是畫畫兒，用一種叫作“荊川紙”的，蒙在小說的繡像上一個個描下來，象習字時候的影寫一樣。讀的書多起來，畫的畫也多起來；書沒有讀成，畫的成績卻不少了，最成片斷的是《蕩寇志》和《西游記》的繡像，都有一大本。 

接下來我們在CSS中應用line-height屬性

我們首先把line-height屬性的值設(shè)置normal

CSS代碼

p.sample1 {line-height:normal; }
p.sample2 {line-height:normal; }

這個狀態(tài)為默認情況下的個狀態(tài)，所以字符間距沒有改變

效果如下

下面我們用以下三個單位分別來設(shè)置行間距

用px設(shè)置

CSS代碼如下

p.sample1 {line-height:20px; }
p.sample2 {line-height:50px; }

在瀏覽器上顯示效果如下。用line-height設(shè)置數(shù)值（這里是默認的16 px）會把數(shù)值上下均等地分配。因此，數(shù)值越大，行的間隔也越大。

用em設(shè)置

接下來是以單位em（Em）設(shè)置行間距的例子。em是以font - size屬性指定的大小為1的單位，沒有在父元素中被指定的情況下為1 em = 16px。

CSS代碼如下

p.sample1 {line-height:2em; }
p.sample2 {line-height:4em; }

在瀏覽器上顯示效果如下

這里指定的值越大，行間距越大。默認為16px，其中2em = 32 px、4em = 64px。

用%設(shè)置

最后用%設(shè)置。以font-size屬性指定的大小為100%，用指定的%的數(shù)值設(shè)置行間距。如果沒有被設(shè)置的父元素的話，100% = 16px。

CSS代碼如下所示

p.sample1 {line-height:150%; }
p.sample2 {line-height:200%; }

在瀏覽器上顯示如下效果

看完了這篇文章，相信你對CSS中l(wèi)ine-height屬性設(shè)置行間距的方法是什么有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！