（原图样式）
今天我们讲一下几个文本标签<code>text-indent</code>,<code>letter-spacing</code>和<code>line-height</code>,并附加讲一下<code>first-line</code>和<code>first-letter</code>的使用方法。
先上源码：
<!DOCTYPE html>
<html>
<head>
<title>css文本标签介绍</title>
<style>
.wenben{
width:300px;
height: 150px;
background-color: #f0f0f0;
padding: 20px;
border: 1px solid #ccc;
margin:0 auto;
}
</style>
</head>
<body>
<div class="wenben">
今天我们来测试一下自己间距的设置方法，主要标签有<code>text-indent</code>、<code>letter-spacing</code>和<code>line-height</code>,附加讲一下<code>first-line</code>和<code>first-letter</code>的样式。
</div>
</body>
</html>
第一个标签：text-indent（设置抬头距离css缩进）
css样式：
<style>
.wenben{
width:300px;
height: 150px;
background-color: #f0f0f0;
padding: 20px;
border: 1px solid #ccc;
margin:0 auto;
text-indent: 23px;
}
</style>
第二个标签：letter-spacing(设置字与字之间的间距)
css样式：
<style>
.wenben{
width:300px;
height: 150px;
background-color: #f0f0f0;
padding: 20px;
border: 1px solid #ccc;
margin:0 auto;
text-indent: 23px;
letter-spacing: 3px;
}
</style>
第三个标签： line-height(设置行高，就是每一行的高度)
css样式：
<style>
.wenben{
width:300px;
height: 150px;
background-color: #f0f0f0;
padding: 20px;
border: 1px solid #ccc;
margin:0 auto;
text-indent: 23px;
letter-spacing: 3px;
line-height: 30px;
}
</style>
第四个标签，其实叫做选择器: ::first-line(设置第一行的样式)
<style>
.wenben{
width:300px;
height: 150px;
background-color: #f0f0f0;
padding: 20px;
border: 1px solid #ccc;
margin:0 auto;
text-indent: 23px;
letter-spacing: 3px;
line-height: 30px;
}
.wenben::first-line{
color:blue;
font-weight: bold/*字体加粗*/;
}
</style>
第五个选择器: ::first-letter(设置第一行的第一个字的样式)
<style>
.wenben{
width:300px;
height: 150px;
background-color: #f0f0f0;
padding: 20px;
border: 1px solid #ccc;
margin:0 auto;
text-indent: 23px;
letter-spacing: 3px;
line-height: 30px;
}
.wenben::first-line{
color:blue;
font-weight: bold/*字体加粗*/;
}
.wenben::first-letter{
font-size: 24px;
color: white;
font-weight: normal;
border: 1px solid red/*设置文字边框*/;
background-color:blue/*设置文字背景*/;
padding: 2px;
}
</style>
你学会了吗？有问题可以私聊我哦！
刚说完HTML语言CSS字体的缩进text-indent,接下来我们讲下字体的行间距属性 line-height. 该属性用来设置行间的距离，也就是我们经常说的行高。可以控制文字行与行之间的距离。
来一起看下line-height的语法:
p {
line-height:20px;
}
怎么理解行间距呢？看下面这个图就可以理解了
对于一行文字来说，文字上面和上一行文字的下面，文本高度，文字的下面和下一行文字的上面，三者加起来就是整个行间距。
来看下具体的效果:
可以看出，段落间的行间距是16px,如果是一行文字的话，可以看的更清楚
<!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 {
line-height:16px;
}
</style>
</head>
<body>
<p>第一年，我考上了大学，来到了北京,冬天的雪就像冷冷的冰雨，
在脸上胡乱的拍.摇啊摇，摇啊摇，摇到外婆桥,从此世人眼中的你就像超人一样屹立于天地间。
</p>
<p>一片冰心在玉壶，我劝天公重抖擞，不拘一格降人才。一片冰心在玉壶，我劝天公重抖擞，不拘一格降人才。</p>
<p>只有聆听你的声音，才能抚平我寂寞无聊的心，HTML5。只有聆听你的声音，才能抚平我寂寞无聊的心，HTML5</p>
</body>
</html>
我们再来看看效果:
对应代码:
<!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>
div {
line-height:16px;
}
</style>
</head>
<body>
<div>马上就要过年了，大家过年好~</div>
</body>
</html>
如果px值更大一些呢？
看着变化不是很大，直接上100px
写着写着，发现原来是我的代码写错了，行间距是line-height，不是text-height,我说怎么看着行间距不变呢。
看下真正的效果:
这里为16px,文字本身为16px，这时候两行之间没有间距，看下代码:
<!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>
div {
line-height:16px;
}
</style>
</head>
<body>
<div>马上就要过年了，大家过年好~</div>
<div>马上就要过年了，大家过年好~</div>
</body>
</html>
看一个效果明显的:
这里修改为32px了，看下对应的代码:
<!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>
div {
line-height:32px;
}
</style>
</head>
<body>
<div>马上就要过年了，大家过年好~</div>
<div>马上就要过年了，大家过年好~</div>
</body>
</html>
可以在段落中设置间距，看下效果:
看下对应代码:
<!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>
div {
line-height:32px;
}
.cool {
line-height: 60px;
}
</style>
</head>
<body>
<div>马上就要过年了，大家过年好~</div>
<div>马上就要过年了，大家过年好~</div>
<div class="cool">看了披荆斩棘的哥哥，又去听了张淇的专辑，他的歌都很正能量且有力量，而且嗓音真心是很棒，在此同时也听了黑豹前几任的歌，也听了其他摇滚派别的歌，不过听来听去，感觉张淇的歌很耐听，听完后，感觉自己也充满了正能量并且对生活充满了希望，我想这就是一个歌手真正的意义吧！！
</div>
</body>
</html>
相关问答
[回答]就是1、2那两个序号紧靠着左边这就是一级编号左对齐,对齐位置为0厘米文字缩进1厘米就是ABC在最左边右一厘米二级编号就是跟第一个相反所有文...
[回答]有远视是正常的,没远视的小孩,长大了肯定要近视的了100%的人都有不同程度的散光的年轻的父母别太焦虑如果散光的很厉害,要配镜矫正轻度就算了,不过...
[回答]意思就是,要求你的论文在word中的格式,全文的文字行距也就是每行文字的距离全部都要是单倍行距.具体步骤:选中全文的文字,然后在word的菜单栏上点“...
[回答]两点间距离公式常用于函数图形内求两点之间距离、求点的坐标的基本公式,是距离公式之一。两点间距离公式叙述了点和点之间距离的关系。扩展资料数轴...
[回答]国家行政机关公文格式GB/T9704-1999规定,信函式格式:发文机关名称上边缘距上页边的距离为30mm,推荐使用小标宋体字,字号由发文机关酌定;发文机关全...
[回答]太阳到地球的距离是149597870千米,即0.0000158光年。地球不是沿着一个完美的圆形轨道环绕太阳旋转,所以日地距离不是一个常数。不过,地球的公转轨道...
两平行线之间的距离公式,两条平行线,求其距离,公式是什么?有推导过程更好.
[回答]修改符号1.删除号:用来删除字、标点符号、词、短语及长句或段落.2.恢复号:又称保留号,用于恢复被删除的文字或符号.如果恢复多个文字,最好每个要恢...
[回答]距一般设置0.1cm。1993年1月1日全国实行统一发票后,发票联必须套印,“发票监制章”,统一后的“发票监制章”形状为椭圆形,规管长轴为3厘...1993年1...
[回答]汽车近光灯直射距离标准约为30-40米,光线明暗截止线在12-18米。如果直射距离过远,由于光照强度有限,整个前方道路都会变得不明亮,路面上细小的...
