css首行缩进2字符代码(关于css首行缩进的属性)

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

text-indent属性用来指定文本的第一行的缩进,通常是将段落的首行缩进。来看下语法使用:

div {

text-indent:10px;

}

来看下使用效果,使用前:

每一行没有缩进

使用后:

每个段落的第一行都缩进了20px,具体代码如下:

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″>

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

<title>CSS样式之文本缩进</title>

<style>

p {

text-indent: 20px;

}

</style>

</head>

<body>

<p>第一年,我考上了大学,来到了北京,冬天的雪就像冷冷的冰雨,

在脸上胡乱的拍.摇啊摇,摇啊摇,摇到外婆桥,从此世人眼中的你就像超人一样屹立于天地间。

</p>

<p>一片冰心在玉壶,我劝天公重抖擞,不拘一格降人才。一片冰心在玉壶,我劝天公重抖擞,不拘一格降人才。</p>

<p>只有聆听你的声音,才能抚平我寂寞无聊的心,HTML5。只有聆听你的声音,才能抚平我寂寞无聊的心,HTML5</p>

</body>

</html>

需要缩进的像素可以是任意值,除了正的px,还可以是负的值,可以看下效果:

这不是我的浏览器坏了,展示不了段落首部,是将px修改为-20px

具体代码如下:

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″>

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

<title>CSS样式之文本缩进</title>

<style>

p {

text-indent: -20px;

}

</style>

</head>

<body>

<p>第一年,我考上了大学,来到了北京,冬天的雪就像冷冷的冰雨,

在脸上胡乱的拍.摇啊摇,摇啊摇,摇到外婆桥,从此世人眼中的你就像超人一样屹立于天地间。

</p>

<p>一片冰心在玉壶,我劝天公重抖擞,不拘一格降人才。一片冰心在玉壶,我劝天公重抖擞,不拘一格降人才。</p>

<p>只有聆听你的声音,才能抚平我寂寞无聊的心,HTML5。只有聆听你的声音,才能抚平我寂寞无聊的心,HTML5</p>

</body>

</html>

根据大家写文章段落的习惯,一般都是缩进两个字,但是20px或者10px是不是2个字的长度呢,回答不是的。缩进字数长度有专门的单位: em

通过设置该属性,所有元素的第一行都可以缩进一个给定的长度,甚至该长度可以是负值。

em是一个相对单位,就是当前元素 font-size 1个文字的大小,如果当前元素没有设置大小,则会按照1个父元素文字大小。

我们来看下效果:

确实是缩进了2个字的长度,看下对应代码:

<!DOCTYPE html>

<html lang=”en”>

<head>

<meta charset=”UTF-8″>

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>

<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>

<title>CSS样式之文本缩进</title>

<style>

p {

text-indent: 2em;

}

</style>

</head>

<body>

<p>第一年,我考上了大学,来到了北京,冬天的雪就像冷冷的冰雨,

在脸上胡乱的拍.摇啊摇,摇啊摇,摇到外婆桥,从此世人眼中的你就像超人一样屹立于天地间。

</p>

<p>一片冰心在玉壶,我劝天公重抖擞,不拘一格降人才。一片冰心在玉壶,我劝天公重抖擞,不拘一格降人才。</p>

<p>只有聆听你的声音,才能抚平我寂寞无聊的心,HTML5。只有聆听你的声音,才能抚平我寂寞无聊的心,HTML5</p>

</body>

</html>

每个段落第一行如果想要三个字间距,就是3em

今天就先到这里,大家周末快乐~

感谢您访问:美文云网站!本文永久链接:https://meiwenyun.com/432390.html。侵删或不良信息举报请联系邮箱:820608633@qq.com或微信:meiwenyun888。
上一篇 2024年8月22日
下一篇 2024年8月22日

相关推荐

分享本页
返回顶部