css中怎么设置行间距

这篇文章主要介绍css中怎么设置行间距,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

创新互联专注于建邺企业网站建设,响应式网站设计,商城网站开发。建邺网站建设公司,为建邺等地区提供建站服务。全流程定制网站制作,专业设计,全程项目跟踪,创新互联专业和态度为您提供的服务

首先我们先了解一下什么是行高,在css中又是如何设置行高,进而设置和调整行间距。

简单来说:行高类似于单线本,单线本里是用一行一行线条隔开的空间,线与线之间的距离就是行高。网页中的文本文字实际上是写在一条看不见的线中的,然后会默认在行高中垂直居中显示。那么在css中是如何设置行高的?在css中可以通过 line-height 属性来设置行高,下面我们来简单介绍一下css line-height 属性吧。

css line-height 属性会影响行框的布局,是用来设置行与行之间的距离(行高)的,不允许使用负值。在应用到一个块级元素的时候,它定义了该元素中基线之间的最小距离而不是最大距离。

line-height 与 font-size 的计算值之差(在 CSS 中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。

下面我们来看看css line-height属性 可能会用的的值:

normal:设置合理的行间距, 默认值。

number:设置数字,此数字会与当前的字体尺寸相乘来设置行间距。

length:设置固定的行间距。

%:基于当前字体尺寸的百分比行间距。

inherit:规定应该从父元素继承 line-height 属性的值。

注:所有浏览器都支持 line-height 属性。

我们来用实例介绍line-height属性是如何设置和调整行间距,下面会举例介绍设置行间距的方法:

1、使用数值来设置行间距



	
		
		使用数值来设置行间距
		
	
	
		

这是拥有标准行高的段落。 默认行高大约是 1。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。

这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。

这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。

效果图:

css中怎么设置行间距

2、使用像素值设置行间距




	
		
		使用数值来设置行间距
		
	

	
		

这是拥有标准行高的段落。 在大多数浏览器中默认行高大约是 20px。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。

这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。

这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。

效果图:

css中怎么设置行间距

3、使用百分比设置行间距

line-height属性指定了一个百分数,则会相对于字体去计算行高。




	
		
		使用数值来设置行间距
		
	

	
		

这是拥有标准行高的段落。 在大多数浏览器中默认行高大约是 110% 到 120%。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。

这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。

这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。

效果图:

css中怎么设置行间距

以上是css中怎么设置行间距的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!


分享名称:css中怎么设置行间距
URL分享:http://bzwzjz.com/article/ishogc.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 成都网站建设 成都网站制作 成都网站建设 成都网站建设 成都网站建设 app网站建设 网站设计 网站制作 网站制作报价 网站设计 自适应网站建设 营销型网站建设 成都响应式网站建设 定制网站制作 成都定制网站建设 网站建设 网站制作公司 重庆网站建设 成都网站建设 营销网站建设 上市集团网站建设 重庆网站制作