【技术等级】初级
【承接文章】《CSS段落对齐方式，系统认识块级元素与内联元素，CSS前端进阶篇》
本文重点讲解CSS技术中文本样式的 line-height 属性以及该属性在单行垂直居中问题上的应用。本文属于前端开发的初级教程，适合于刚刚开始接触CSS技术的学习者。
一、设置段落行距：
CSS技术利用 line-height 属性来设置行距
顾名思义，行距就是段落中行与行之间的距离。调整行距可以让段落看起来更加美观。
该属性的取值是带有单位的数值。
例如：p{line-height:30px;}
上述代码表明：<p></p>标记对内部文本的行距为30像素。
本身该属性的使用是非常简单的，但是有一个问题需要大家考虑：这个行距是以一行的哪个标准线来进行度量的呢？答案是一行的“基线”。那么，什么是“基线”呢？
四线三格的第三线就是 “基线”
上面这张图为我们解释了什么是“基线”。基线就是英语本子上四线三格的第三线，是大部分英文字母在书写时结束的那条线。
在CSS中，line-height 属性的调整就是以这条线为标准线的。换句话说，当line-height属性设置为一定的数值时，段落中任意两行的行距就是这两行基线之间的距离。
二、行距属性的应用：
首先，大家看下面这个效果。顶部文本“欢迎关注小海前端”这几个字在一个粉红色的块中显示，并且是垂直方向居中的，这个应该在页面中如何设置呢？
如何实现块中的垂直居中
这就需要用到 line-height 属性的一个小技巧。
当一行文本（注意：必须是一行）在一个<div></div>块内部显示时，将该<div></div>块的行高设置为这个块本身的高度，就可以让内部的一行文本垂直居中了。
相应的CSS代码如下所示：
div{
width:1000px; height:30px;
background-color:#ff5857; //该属性为背景颜色，主要是让我们能够看到块本身
line-height:30px;
}
大家看上述代码：line-height 属性的取值和 height 属性的取值是相同的，这样内部的一行文本就实现垂直居中了。
文章预告下一篇文章中，小海老师会重点为大家讲解vertical-align属性的使用。该属性的使用要求较多，使用起来较为繁琐，希望广大前端爱好者千万不要错过。
小海教材如果大家希望得到更加全面的关于HTML和CSS技术讲解的内容，可以私信我。我会免费将小海老师自己编写的HTML和CSS的PDF教材发给你，帮助你在前端开发的道路上阔步前行。
小海声明在头条上也已经写了有十篇文章了。这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章，逐步学到一定的知识，甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验，每写一篇时我都尽量把握好措辞，用简单易懂的语言描述，同时精心设计版面，让版面更加丰富，激发阅读兴趣。所以，每一篇文章可能篇幅不长，但是都要耗费小海老师很久的时间。
希望收藏了我写的文章的你同时可以关注一下“小海前端”，因为这些文章都是连载的，并且是经过我精心整理和系统的归纳过的。
关注“小海前端”，我会继续为大家奉上更加深入的前端开发文章，也希望更多的初学者跟着学下去，我们共同将前端开发的路努力坚持的走下去。
,
