码云前端 2021-07-21

CSS line-height 属性

AI 概述

属性定义及使用说明属性值浏览器支持实例更多实例使用像素值设置行间距使用数值来设置行间距相关文章属性定义及使用说明 line-height 设置以百分比计的行高。注意：负值是不允许的默认值： normal 继承： yes 版本： CSS1 JavaScript 语法： object.style.lineHeight=”2″ ...

文章目录隐藏

属性定义及使用说明
属性值
浏览器支持
实例
更多实例

使用像素值设置行间距
使用数值来设置行间距

属性定义及使用说明

line-height 设置以百分比计的行高。

注意： 负值是不允许的

默认值：	normal
继承：	yes
版本：	CSS1
JavaScript 语法：	object.style.lineHeight=”2″

属性值

值	描述
normal	默认。设置合理的行间距。
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length	设置固定的行间距。
%	基于当前字体尺寸的百分比行间距。
inherit	规定应该从父元素继承 line-height 属性的值。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性
line-height	1.0	4.0	1.0	1.0	7.0

实例

使用百分比设置行高:

<style>
    p.small {line-height:70%;}
    p.big {line-height:200%;}
</style>

<body>
<p>
这是一个标准行高的段落。<br>
这是一个标准行高的段落。<br>
大多数浏览器的默认行高约为 110%至 120%。<br>
</p>

<p class="small">
这是一个更小行高的段落。<br>
这是一个更小行高的段落。<br>
这是一个更小行高的段落。<br>
这是一个更小行高的段落。<br>
</p>

<p class="big">
这是一个更大行高的段落。<br>
这是一个更大行高的段落。<br>
这是一个更大行高的段落。<br>
这是一个更大行高的段落。<br>
</p>

</body>

效果如下：

更多实例

使用像素值设置行间距

本例演示如何使用像素值来设置段落中的行间距。

<style>
p.small
{
	line-height: 10px
}
p.big
{
	line-height: 30px
}
</style>

<body>
<p>
这是一个标准行高的段落。
在大多数浏览器默认行高约 20 px。
这是一个标准行高的段落。
这是一个标准行高的段落。
</p>

<p class="small">
这是一个更小行高的段落。
这是一个更小行高的段落。
这是一个更小行高的段落。
这是一个更小行高的段落。
</p>

<p class="big">
这是一个更大行高的段落。
这是一个更大行高的段落。
这是一个更大行高的段落。
这是一个更大行高的段落。
</p>
</body>

效果如下：

使用数值来设置行间距

本例演示如何使用一个数值来设置段落中的行间距。

<style>
p.small
{
line-height: 0.5
}
p.big
{
line-height: 2
}
</style>

<body>
<p>
这是一个标准行高的段落。
浏览器的默认行高为“1”。
这是一个标准行高的段落。
这是一个标准行高的段落。
</p>

<p class="small">
这是一个更小行高的段落。
这是一个更小行高的段落。
这是一个更小行高的段落。
这是一个更小行高的段落。
</p>

<p class="big">
这是一个更大行高的段落。
这是一个更大行高的段落。
这是一个更大行高的段落。
这是一个更大行高的段落。
</p>
</body>

效果如下：

CSS 教程: CSS Text 文本属性

以上关于CSS line-height 属性的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。

「点点赞赏，手留余香」

赞 0 赏

给作者打赏，鼓励TA抓紧创作！

微信

支付宝

还没有人赞赏，快来当第一个赞赏的人吧！

声明：本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符，请将相关资料发送至 admin@mybj123.com 进行投诉反馈，一经查实，立即处理！
重要：如软件存在付费、会员、充值等，均属软件开发者或所属公司行为，与本站无关，网友需自行判断
码云笔记 » CSS line-height 属性