【css中让段落缩进】测试开发全栈-html (15) CSS字体中的文本缩进

今天下一个HTML语言CSS样式字体的文本缩进text-indent

Text-indent属性指定文本首行的缩进。通常缩进段落的第一行。从语法来看，使用：

Div {

text-indent :10 px；

}

请看使用效果。使用前是：

每行无缩进

使用后：

每段的第一行缩进20px。具体代码为：

！DOCTYPE html

Html lang='en '

头(电影)

meta charset=' utf-8 '

meta http-equiv=' x-ua-compatible ' content=' ie=edge '

元名称=' viewport ' content=' width=device-width，initial-scale=1.0 '

TitleCSS样式文本缩进/title

风格(音乐)

P {

文字-索引： 20px

}

/style

/head

菩提

p第一年我考上大学来到北京，冬天的雪就像冰冷的冰雨。

往脸上随便拍。摇，摇，摇到涩桥。从此在世人眼中就像超人一样屹立在天地之间。

/p

p的冰心在玉壶里，我劝孔泉不受格调限制，让人才下降。一块冰心在玉壶里，我劝孔泉用烟灰缸，不拘格调，降低人才。/p

p要听你的声音才能抚慰我凄凉无聊的心，HTML5。只有听到你的声音，才能抚慰我凄凉无聊的心。HTML5/p

/body

/html

需要缩进的像素可以是任意值，不仅是正值px，还可以是负值，可以看到效果：

这不是我的浏览器坏了。不能展示段落的第一部分。就是将px修改为-20px

具体代码如下：

！DOCTYPE html

Html lang='en '

头(电影)

meta charset=' utf-8 '

meta http-equiv=' x-ua-compatible ' content=' ie=edge '

元名称=' viewport ' content=' width=device-width，initial-scale=1.0 '

TitleCSS样式文本缩进/title

风格(音乐)

P {

文本-索引：-20px；

}

/style

/head

菩提

p第一年我考上大学来到北京，冬天的雪就像冰冷的冰雨。

往脸上随便拍。摇，摇，摇到涩桥。从此在世人眼中就像超人一样屹立在天地之间。

/p

p的冰心在玉壶里，我劝孔泉不受格调限制，让人才下降。一块冰心在玉壶里，我劝孔泉用烟灰缸，不拘格调，降低人才。/p

p要听你的声音才能抚慰我凄凉无聊的心，HTML5。只有听到你的声音，才能抚慰我凄凉无聊的心。HTML5/p

/body

/html

根据大家写文章段落的习惯，一般会缩进两个字，但20px或10px是两个字的长度吗？回答不。缩进的单词长度有特殊单位3360em

设置此属性后，所有元素的第一行都可以缩进指定的长度，长度也可以是负数。

Em是相对单位，即当前零件font-size中一个字符的大小。如果未设置当前零件大小，则em将根据一个父零件文字大小进行调整。

让我们看一下效果：

实际上缩进两个字的长度，看相应的代码：

！DOCTYPE html

Html lang='en '

头(电影)

meta charset=' utf-8 '

meta http-equiv=' x-ua-compatible ' content=' ie=edge '

元名称=' viewport ' content=' width=device-width，initial-scale=1.0 '

TitleCSS样式文本缩进/title

风格(音乐)

P {

text-indent : 2em；

}

/style

/head

菩提

p第一年我考上大学来到北京，冬天的雪就像冰冷的冰雨。

往脸上随便拍。摇，摇，摇到涩桥。从此在世人眼中就像超人一样屹立在天地之间。

/p

p的冰心在玉壶里，我劝孔泉不受格调限制，让人才下降。一块冰心在玉壶里，我劝孔泉用烟灰缸，不拘格调，降低人才。/p

p要听你的声音才能抚慰我凄凉无聊的心，HTML5。只有听到你的声音，才能抚慰我凄凉无聊的心。HTML5/p

/body

/html

如果每段的第一行要三个字母的间距，则为3em

今天先来这里。大家周末过得愉快~