css中的text-indent屬性怎么用

# CSS中的text-indent屬性怎么用

## 一、text-indent屬性概述

`text-indent`是CSS中用于控制文本塊首行縮進的屬性，主要作用于塊級元素（如`<p>`、`<div>`等）。該屬性通過指定縮進長度，可以實現類似中文段落首行空兩格的排版效果。

**基本語法**：
```css
selector {
  text-indent: length | percentage | inherit;
}

二、屬性值詳解

1. 固定長度值

最常用的方式，支持所有CSS長度單位：

p {
  text-indent: 2em;   /* 相對單位（推薦） */
  text-indent: 20px;  /* 絕對單位 */
}

• em單位基于當前字體大?。?em = 1個字體高度）
• 負值可實現懸掛縮進效果

2. 百分比值

基于父元素的寬度計算縮進：

div {
  text-indent: 10%;
}

3. 全局值

p {
  text-indent: inherit;  /* 繼承父元素值 */
  text-indent: initial;  /* 重置為默認值0 */
}

三、實際應用場景

1. 中文段落排版

article p {
  text-indent: 2em;  /* 實現首行空兩格 */
  margin-bottom: 1.5em;
}

2. 列表項懸掛縮進

ul li {
  text-indent: -1em;      /* 首行向左突出 */
  padding-left: 1em;      /* 保持后續行對齊 */
}

3. 特殊排版效果

.poem {
  text-indent: -3em;
  padding-left: 3em;
  font-style: italic;
}

四、注意事項

1. 繼承特性：

   • 該屬性會被子元素繼承
   • 表格單元格（<td>）默認不繼承

2. 響應式設計：

   /* 移動端減小縮進 */
   @media (max-width: 768px) {
    p { text-indent: 1em; }
   }
   

3. 與其它屬性的配合：

   • 與direction: rtl配合時，縮進方向會改變
   • 不影響display: inline元素

4. 瀏覽器差異：

   • 舊版IE對百分比計算有差異
   • 部分瀏覽器在<button>元素上表現不一致

五、進階技巧

1. 多列布局中的縮進

.multicol {
  column-count: 3;
}
.multicol p {
  text-indent: 2em;
}

2. 結合偽元素

p.special::first-line {
  text-indent: 0;  /* 取消首行縮進 */
}

3. 動畫效果

@keyframes indent {
  from { text-indent: -100%; }
  to { text-indent: 0; }
}
.animate {
  animation: indent 2s;
}

六、兼容性參考

結語

text-indent是文本排版的基礎屬性，合理使用可以： - 提升段落可讀性 - 創建專業印刷效果 - 實現創意布局

建議在項目中使用相對單位（如em）以保證響應式效果，同時注意測試不同語言的排版需求。 “`

注：本文約850字，采用Markdown格式編寫，包含代碼示例和結構化內容。實際字數可能因顯示環境略有差異。