溫馨提示×

溫馨提示×

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

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

html怎么設(shè)置p標(biāo)簽行間距

發(fā)布時(shí)間：2022-04-27 16:00:46 來源：億速云 閱讀：555 作者：iii 欄目：大數(shù)據(jù)

本篇內(nèi)容主要講解“html怎么設(shè)置p標(biāo)簽行間距”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“html怎么設(shè)置p標(biāo)簽行間距”吧!

html設(shè)置p標(biāo)簽行間距的方法是，給段落文字添加line-height屬性，并且設(shè)置合理的行間距數(shù)值即可，例如【p.small {line-height:70%;}】，表示設(shè)置行間距為當(dāng)前字體的百分之70。

本文操作環(huán)境：windows10系統(tǒng)、html 5、thinkpad t480電腦。

我們要設(shè)置p標(biāo)簽的行間距其實(shí)是非常簡單的，因?yàn)樵赾ss中有一個(gè)現(xiàn)成的屬性line-height，這是由于該屬性才讓行間距的設(shè)置如此簡單。可能很多同學(xué)不太清楚該屬性，下面就讓我們來一起看看該屬性吧。

line-height屬性是用來設(shè)置以百分比計(jì)的行高的。

該屬性的常用屬性值有如下幾種：

  • normal    默認(rèn)。設(shè)置合理的行間距。

  • number    設(shè)置數(shù)字，此數(shù)字會與當(dāng)前的字體尺寸相乘來設(shè)置行間距。

  • length    設(shè)置固定的行間距。

  • %    基于當(dāng)前字體尺寸的百分比行間距。

  • inherit    規(guī)定應(yīng)該從父元素繼承 line-height 屬性的值。

下面我們來一起看看代碼示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>億速云(www.php.cn)</title> 
<style>
p.small {line-height:70%;}
p.big {line-height:200%;}
</style>
</head>

<body>
<p>
這是一個(gè)標(biāo)準(zhǔn)行高的段落。<br>
這是一個(gè)標(biāo)準(zhǔn)行高的段落。<br>
大多數(shù)瀏覽器的默認(rèn)行高約為110%至120%。<br>
</p>

<p class="small">
這是一個(gè)更小行高的段落。<br>
這是一個(gè)更小行高的段落。<br>
這是一個(gè)更小行高的段落。<br>
這是一個(gè)更小行高的段落。<br>
</p>

<p class="big">
這是一個(gè)更大行高的段落。<br>
這是一個(gè)更大行高的段落。<br>
這是一個(gè)更大行高的段落。<br>
這是一個(gè)更大行高的段落。<br>
</p>

</body>
</html>

運(yùn)行效果如下圖所示：

html怎么設(shè)置p標(biāo)簽行間距

到此，相信大家對“html怎么設(shè)置p標(biāo)簽行間距”有了更深的了解，不妨來實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

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

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

AI
助
手