（原图样式）
今天我们讲一下几个文本标签<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>
相关问答
[回答]可以肯定的告诉你:20m(标准的)当然也有部分1:1万地形图是采用1:5万地形图放大的等高距为40m
[回答]火花塞间隙是指火花塞中心电极与接地电极间的间隙距离。火花塞间隙越大点火时产生的电弧就越长,更容易点燃气缸中的混合气体,动能自然也就更大。但...
[最佳回答](1)pt在文档里面是间距的一种单位,是“磅”的意思.(2)要实现该操作也不难,在文档的“格式”—“段落”—“缩进和间距”里面,在间距后边的“行距”...
[回答]汽车大灯作为汽车的眼睛,对于夜间行车安全起着至关重要的作用。随着汽车科技的发展,汽车大灯的种类也不断的提高,从卤素大灯、氙气大灯、LED大灯到...
变压器对孕妇有影响吗?因为我丈夫租房子在离变压器不足五米的地方,我现在怀孕已经有四个多月了,才住在变压器旁边只有一个多月,接下来要住四个月才回老家,这样会...
[回答]两点间距离公式常用于函数图形内求两点之间距离、求点的坐标的基本公式,是距离公式之一。两点间距离公式叙述了点和点之间距离的关系。扩展资料数轴...
[回答]商朝好像从公元前1760年开始,到清朝灭亡是公元1911年.共大约3671年.---------------从有文字记载的夏朝开始,我国历史上经历了夏、商、周、秦、汉、...
[回答]日地距离,又称太阳距离,指的是日心到地心的直线长度。由于地球绕太阳运行的轨道是个椭圆,太阳位于一个焦点上,所以这个距离是时刻变化着的。日地距...
[回答]影响刹车距离的因素有哪些,在开车时,刹车距离是车主必须要明白的事情之一。但是不同情况下的刹车距离也肯定是不同的,那么刹车距离都跟什么有关。...
[回答]意思就是,要求你的论文在word中的格式,全文的文字行距也就是每行文字的距离全部都要是单倍行距.具体步骤:选中全文的文字,然后在word的菜单栏上点“...
