位置:电子教程 > CSS入门到精通 (如果看不到内容请使用360浏览器) 推荐学习资源
CSS入门
CSS 基础样式
CSS 高级样式
语法应用:CSS 对齐
当前阅读教程:CSS入门到精通 > 行高 line-height属性
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 字符间距 letter-spacing属性 下一篇: 文本对齐 text-align属性

属性定义及使用说明

设置行高:.

u  注意: 负值是不允许的

默认值:

normal

继承:

yes

版本:

CSS1

JavaScript 语法:

object.style.lineHeight="2"

浏览器支持

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

image.png

属性值

描述

normal

默认。设置合理的行间距。

number

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

length

设置固定的行间距。

%

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

inherit

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

示例

小白教程网www.2d5.net

代码

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>行高 line-height属性</title>

<!--定义内部样式-->

<style>

     .shuzi01{

             line-height: 0.5;/*行高:数字*/

     }

     .shuzi02{

             line-height: 2;/*行高:数字*/

     }       

     .danwei01{

             line-height: 10px;/*行高:带单位*/

     }

     .danwei02{

             line-height: 30px;/*行高:带单位*/

     }       

     .baifenbi01{

             line-height: 70%;/*行高:百分比*/

     }

     .baifenbi02{

             line-height: 200%;/*行高:百分比*/

     }               

</style>    

</head>

<body>

    

     <!--默认行高-->

     <p>

             这是一个标准行高的段落。浏览器的默认行高为“1”。这是黄菊华老师的css课程。

     </p><hr>

    

     <!--用数字来设置行高-->

     <p><!--数字:0.5-->

             用数字0.5来设置行高:这是一个标准行高的段落。浏览器的默认行高为“1”。这是黄菊华老师的css课程。

     </p>

     <p><!--数字:2-->

              用数字2来设置行高:这是一个标准行高的段落。浏览器的默认行高为“1”。这是黄菊华老师的css课程。

     </p><hr>

    

     <!--用带单位的设置行高-->

     <p><!--带单位:10px-->

             用带单位的10px设置行高:这是一个标准行高的段落。浏览器的默认行高为“1”。这是黄菊华老师的css课程。

     </p>

     <p><!--带单位:30px-->

             用带单位的30px设置行高:这是一个标准行高的段落。浏览器的默认行高为“1”。这是黄菊华老师的css课程。

     </p><hr>

    

     <!--用百分比设置行高-->

     <p><!--百分比:70%-->

             用百分比70%设置行高:这是一个标准行高的段落。浏览器的默认行高为“1”。这是黄菊华老师的css课程。

     </p>

     <p><!--百分比:200%-->

             用百分比200%设置行高:这是一个标准行高的段落。浏览器的默认行高为“1”。这是黄菊华老师的css课程。

     </p>

 

</body>

</html>

效果图

小白教程网www.2d5.net

image.png

上一篇: 字符间距 letter-spacing属性 下一篇: 文本对齐 text-align属性
计算机毕业设计作品网      毕业设计文档网      小程序教程网       毕业设计资料网  |         毕业设计定制QQ:45157718(微信同号)(备注:毕设)