溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

CSS中l(wèi)ine-height屬性設(shè)置行間距的方法是什么

發(fā)布時(shí)間：2020-08-29 11:04:20 來(lái)源：億速云 閱讀：162 作者：小新 欄目：web開(kāi)發(fā)

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

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

CSS中l(wèi)ine-height屬性設(shè)置行間距的方法是什么

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

我們下面來(lái)看具體的示例

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

HTML代碼

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="sample.css" type="text/css">
</head>
<body>
<p class="sample1">冬天的百草園比較的無(wú)味；雪一下，可就兩樣了。拍雪人（將自己的全形印在雪上）和塑雪羅漢需要人們鑒賞，這是荒園，人跡罕至，所以不相宜，只好來(lái)捕鳥(niǎo)。薄薄的雪，是不行的；總須積雪蓋了地面一兩天，鳥(niǎo)雀?jìng)兙靡褵o(wú)處覓食的時(shí)候才好。掃開(kāi)一塊雪，露出地面，用一支短棒支起一面大的竹篩來(lái)，下面撒些秕谷，棒上系一條長(zhǎng)繩，人遠(yuǎn)遠(yuǎn)地牽著，看鳥(niǎo)雀下來(lái)啄食，走到竹篩底下的時(shí)候，將繩子一拉，便罩住了。 </p>
<p class="sample2">先生讀書(shū)入神的時(shí)候，于我們是很相宜的。有幾個(gè)便用紙糊的盔甲套在指甲上做戲。我是畫畫兒，用一種叫作“荊川紙”的，蒙在小說(shuō)的繡像上一個(gè)個(gè)描下來(lái)，象習(xí)字時(shí)候的影寫一樣。讀的書(shū)多起來(lái)，畫的畫也多起來(lái)；書(shū)沒(méi)有讀成，畫的成績(jī)卻不少了，最成片斷的是《蕩寇志》和《西游記》的繡像，都有一大本。 </p>
</body>
</html>

接下來(lái)我們?cè)贑SS中應(yīng)用line-height屬性

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

CSS代碼

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

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

效果如下

CSS中l(wèi)ine-height屬性設(shè)置行間距的方法是什么

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

用px設(shè)置

CSS代碼如下

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

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

CSS中l(wèi)ine-height屬性設(shè)置行間距的方法是什么

用em設(shè)置

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

CSS代碼如下

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

在瀏覽器上顯示效果如下

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

CSS中l(wèi)ine-height屬性設(shè)置行間距的方法是什么

用%設(shè)置

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

CSS代碼如下所示

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

在瀏覽器上顯示如下效果

CSS中l(wèi)ine-height屬性設(shè)置行間距的方法是什么

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

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手