html怎麼設定p標籤行間距-html教學-PHP中文網

首頁

web前端

html教學

html怎麼設定p標籤行間距

王林

Jun 17, 2021 pm 03:20 PM

html p標籤行間距

html設定p標籤行間距的方法是，為段落文字新增line-height屬性，並且設定合理的行間距數值即可，例如【p.small {line-height:70%;}】，表示設定行間距為目前字體的百分之70。

html怎麼設定p標籤行間距

本文操作環境：windows10系統、html 5、thinkpad t480電腦。

我們要設定p標籤的行間距其實是非常簡單的，因為在css中有一個現成的屬性line-height，這是由於該屬性才讓行間距的設定如此簡單。可能很多同學不太清楚該屬性，下面就讓我們來一起看看該屬性吧。

line-height屬性是用來設定以百分比計的行高的。

此屬性的常用屬性值有下列幾種：

normal 預設。設定合理的行間距。
number 設定數字，此數字會與目前的字體尺寸相乘來設定行間距。
length 設定固定的行間距。
% 基於目前字體尺寸的百分比行間距。
inherit 規定應該從父元素繼承 line-height 屬性的值。

下面我們來一起看看程式碼範例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(m.sbmmt.com)</title> 
<style>
p.small {line-height:70%;}
p.big {line-height:200%;}
</style>
</head>

<body>
<p>
这是一个标准行高的段落。<br>
这是一个标准行高的段落。<br>
大多数浏览器的默认行高约为110%至120%。<br>
</p>

<p class="small">
这是一个更小行高的段落。<br>
这是一个更小行高的段落。<br>
这是一个更小行高的段落。<br>
这是一个更小行高的段落。<br>
</p>

<p class="big">
这是一个更大行高的段落。<br>
这是一个更大行高的段落。<br>
这是一个更大行高的段落。<br>
这是一个更大行高的段落。<br>
</p>

</body>
</html>

運行效果如下圖所示：

html怎麼設定p標籤行間距

熱AI工具

熱工具

熱門話題

Laravel 教程

1602

PHP教程

1506

276

Related knowledge

如何在HTML中創建一個無序的列表？ Jul 30, 2025 am 04:50 AM

要創建HTML無序列表，需使用標籤定義列表容器，每個列表項用標籤包裹，瀏覽器會自動添加項目符號；1.使用標籤創建列表；2.每個列表項用標籤定義；3.瀏覽器自動生成默認圓點符號；4.可通過嵌套實現子列表；5.使用CSS的list-style-type屬性可修改符號樣式，如disc、circle、square或none；正確使用這些標籤即可生成標準無序列表。

語義HTML對於SEO和可訪問性的重要性 Jul 30, 2025 am 05:05 AM

semantichtmlimprovesbothseoandAccessibility formaningfultagSthatConveyContentsUrture.1）ItenhancesseothRoughBetterContterContenterContenterContenchyArchyWithProperHeadingLeheadinglevels，ifravedIndexingViaeLementLikeAnd，andsupportFortForrichSnippersingsundsustructussunddbuestussund.2）

如何以HTML表單創建搜索輸入字段 Aug 02, 2025 pm 04:44 PM

Usetheelementwithinatagtocreateasemanticsearchfield.2.Includeaforaccessibility,settheform'sactionandmethod="get"attributestosenddatatoasearchendpointwithashareableURL.3.Addname="q"todefinethequeryparameter,useplaceholdertoguideuse

HTML中鏈接標籤中rel屬性的目的是什麼？ Aug 03, 2025 pm 04:50 PM

rel =“ stylesheet” linkscssfilesfilesforstylingthepage; 2.rel =“ pRELOAD” hintstopreloadcritical ricationResourcesourcesorforperformance; 3.rel =“ icon” setSthewebsite’sfavicon; 4.Rel =“ 4.REL =“ necter” selfertAltate's supportAlternate'sporlateRateSlikerSsorsSorsorSorprint; 5.ReL; 5.REL; 5.REL = REL =＆QU＆QU＆QU＆QU

如何在HTML中嵌入PDF文檔？ Aug 01, 2025 am 06:52 AM

使用標籤是最簡單且推薦的方法，語法為，適用於現代瀏覽器直接嵌入PDF；2.使用標籤可提供更好的控制和備用內容支持，語法為，並在標籤內提供下載鏈接作為不支持時的備用方案；3.可選通過GoogleDocsViewer嵌入，但因隱私和性能問題不建議廣泛使用；4.為提升用戶體驗，應設置合適的高度、使用響應式尺寸（如height:80vh）並提供PDF下載鏈接，以便用戶自行下載查看。

HTML中錨標籤的目標屬性的目的是什麼？ Aug 02, 2025 pm 02:23 PM

ThetargetattributeinanHTMLanchortagspecifieswheretoopenthelinkeddocument.1._selfopensthelinkinthesametab(default).2._blankopensthelinkinanewtaborwindow.3._parentopensthelinkintheparentframe.4._topopensthelinkinthefullwindowbody,removingframes.Forexte