CSS如何設置首行縮進？附源碼

猿友 2021-05-22 12:06:01 瀏覽數 (5181)

反饋

我們在進行網頁的文字開發(fā)時，如果文字過長就需要用到首行縮進以體現美感。那么 CSS 如何設置首行縮進呢？這篇文章告訴你。

text-indent 屬性

CSS 的text-indent?屬性是用來設置文本段落首行縮進的。這個屬性可以被設置在 div、p 標簽下面的文本。其屬性值的單位em?是指無論字體大小，都能自適應縮進兩個字附的空格。如果知道字體大小，也可以直接使用px?作為單位。

具體代碼使用如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>HTML如何設置首行縮進- 編程獅(w3cschool.cn)</title>
    <style type="text/css">
	#indent{
	    text-indent: 2em;
	}
     </style>
</head>
<body>
    <p>這段話未設置首行縮進兩個字符用作對比。</p>
    <p id="indent">這一段話將會被設置為首行縮進兩個字符。首行縮進是為了讓文字顯得有層次，不會密密麻麻擠作一團。我們需要用到text-indent屬性來設置。具體效果如圖。</p>
</body>
</html>

實現效果如下：

CSS設置首行縮進

以上就是文章“CSS 如何設置首行縮進？附源碼”的全部內容。想要了解更多 CSS 學習資料請前往 w3cschool。

CSS

0 人點贊