css行间距(css行间距代码)

很多小伙伴留言想了解关于css行间距的一些详细内容,下面是()小编整理的与css行间距相关的信息分享给大家,希望对大家有所帮助呢。

【技术等级】初级

【承接文章】《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教材发给你,帮助你在前端开发的道路上阔步前行。

小海声明

在头条上也已经写了有十篇文章了。这些文章都是从前端开发的基础开始一步一步讲起的。我非常希望能有更多的前端开发初学者通过我写的文章,逐步学到一定的知识,甚至慢慢有了入门的感觉。这些文章都是我这几年教学过程中的经验,每写一篇时我都尽量把握好措辞,用简单易懂的语言描述,同时精心设计版面,让版面更加丰富,激发阅读兴趣。所以,每一篇文章可能篇幅不长,但是都要耗费小海老师很久的时间。

希望收藏了我写的文章的你同时可以关注一下“小海前端”,因为这些文章都是连载的,并且是经过我精心整理和系统的归纳过的。

关注“小海前端”,我会继续为大家奉上更加深入的前端开发文章,也希望更多的初学者跟着学下去,我们共同将前端开发的路努力坚持的走下去。

原文链接:,转发请注明来源!