CSS控制文字首行縮進(jìn)的方法

在CSS中，我們可以使用text-indent屬性來控制文字的首行縮進(jìn)，這個(gè)屬性可以指定首行文本應(yīng)該縮進(jìn)多少空間，下面是一些示例代碼，展示如何使用text-indent來實(shí)現(xiàn)文字首行縮進(jìn)的效果。

示例1: 使用像素值

p {
  text-indent: 20px;
}

示例2: 使用em單位

p {
  text-indent: 2em;
}

示例3: 使用百分比

p {
  text-indent: 5%;
}

示例4: 去除縮進(jìn)

p {
  text-indent: 0;
}

示例5: 繼承父元素的縮進(jìn)

div p {
  text-indent: inherit;
}

示例6: 使用負(fù)值反轉(zhuǎn)縮進(jìn)

p {
  text-indent: -20px;
}

示例7: 應(yīng)用到所有段落

{
  text-indent: 2em;
}

示例8: 使用CSS偽類控制特定段落的縮進(jìn)

p:first-line {
  text-indent: 20px;
}

示例9: 使用CSS變量控制縮進(jìn)深度

:root {
  --indent-size: 20px;
}
p {
  text-indent: var(--indent-size);
}

示例10: 使用transform屬性實(shí)現(xiàn)動(dòng)態(tài)縮進(jìn)效果（僅適用于現(xiàn)代瀏覽器）

p {
  transform: translateX(-20px); /* 水平移動(dòng)文本 */
}