如何使用 CSS 縮排 HTML 中的文字？-css教學-PHP中文網

CSS 中的縮排

#方法一：使用text-indent屬性

文法

範例

方法 2：使用 padding-left 屬性

結論

首頁

web前端

css教學

如何使用 CSS 縮排 HTML 中的文字？

王林

Sep 11, 2023 pm 03:57 PM

如何使用 CSS 缩进 HTML 中的文本？

HTML，超文本標記語言，用於建立網頁的結構。此外，CSS 是一種樣式表語言，用於設定這些頁面的視覺外觀的樣式。

縮排是網頁上文字格式的重要方面之一，因為它允許在段落開頭創建視覺偏移。或文字區塊。縮排可用於使文字更易於閱讀並在文件中創建結構感。

CSS 中的縮排

CSS 或層疊樣式表是一個強大的工具，它允許我們控制網頁上 HTML 元素的視覺呈現。使用 CSS，我們可以設定文字樣式，更改其字體、大小、顏色，甚至縮排。

在 CSS 中，縮排透過在元素的左側或右側添加空格或填充來在元素之間建立視覺分隔。它透過在不同部分或內容區塊之間創建清晰的分隔來幫助提高網頁的可讀性和結構。

有多種方法可以使用 CSS 在 HTML 中縮排文字。在這裡，我們將討論兩種常見的方法。

方法 1：使用 text-indent 屬性
#方法 2：使用 padding-left 屬性

#方法一：使用text-indent屬性

text-indent 屬性用於在元素內第一行文字的開頭建立水平空間。它通常用於創建縮排段落或將文字區塊與周圍內容分開。 text-indent 的值可以以像素、em 或包含元素寬度的百分比指定。

文法

以下是使用 CSS 在 HTML 中縮排文字的語法 -

css selector {
   text-indent: value;
}

登入後複製

範例

以下是使用 text-indent 屬性在 HTML 中縮排文字的範例。在此範例中，我們將所選段落的第一行縮排 2em。

<!DOCTYPE html>
<html>
<head>
   <style>
      h3 {
         text-align: center;
      }
      .indented-p {
         text-indent: 2em;
      }
   </style>
</head>
   <body>
      <h3>This is an example of a text-indent property.</h3>
      <p class="indented-p">This is an indented paragraph. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
      <p>This is a simple paragraph. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
   </body>
</html>

登入後複製

方法 2：使用 padding-left 屬性

padding-left 屬性用於在元素的左邊緣與其內容之間建立空間。它通常用於建立縮排的文字區塊，例如項目符號清單或區塊引用。 padding-left 的值可以以像素、em 或包含元素寬度的百分比指定。

文法

css selector {
   padding-left: value;
}

登入後複製

範例

以下是使用 padding-left 屬性在 HTML 中縮排文字的範例。在此範例中，padding-left 屬性將用於在段落左側新增 40 像素的空間。

<!DOCTYPE html>
<html>
<head>
   <style>
      h3 {
         text-align: center;
      }
      .indented-p {
         padding-left: 40px;
      }
   </style>
</head>
   <body>
      <h3>This is an example of a padding-left property.</h3>
      <p class="indented-p">This is an indented paragraph. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
      <p>This is a simple paragraph. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
   </body>
</html>

登入後複製