1. 首页
  2. CSS 菜鸟教程
  3. CSS - line-height 属性

CSS - line-height 属性

CSS line-height 属性修改构成一行文本的内联框的高度。

可能的值

  • normal − 指示浏览器将元素中行的高度设置为“合理”的距离。
  • number − 元素中行的实际高度是此值乘以元素的字体大小。
  • length − 元素中行的高度是给定的值。
  • percentage − 元素中行的高度计算为元素字体大小的百分比。
  • initial − 将 line-height 的值设置为默认值。
  • inherit − line-height 的值继承自其父值。

适用于

所有 HTML 元素。

DOM 语法

object.style.lineHeight = "15px;"

CSS 行高示例

以下是示例 :

<html>
	 	<head>
	 	 	 <style>
	 	 	 	 	div.a {
	 	 	 	 	 	 	 	 line-height: 2in;
	 	 	 	 	 	 	 	 font-size: 10pt;
	 	 	 	 	 	 	 	 background-color: rgb(188, 201, 238);
	 	 	 	 	 	 	 	 margin-bottom: 2px;
	 	 	 	 	 	 	 	}
	 	 	 	 	div.b {
	 	 	 	 	 	 	 	 line-height: 100px;
	 	 	 	 	 	 	 	 font-size: 10pt;
	 	 	 	 	 	 	 	 background-color: rgb(230, 235, 185);
	 	 	 	 	 	 	 	 margin-bottom: 2px;
	 	 	 	 	 	 	 	}
	 	 	 	 	div.c {
	 	 	 	 	 	 	 	 line-height: 5;
	 	 	 	 	 	 	 	 font-size: 10pt;
	 	 	 	 	 	 	 	 background-color: rgb(231, 174, 218);
	 	 	 	 	 	 	 	 margin-bottom: 5px;
	 	 	 	 	 	 	 	}
	 	 	 	 	div.d {
	 	 	 	 	 	 	 	 line-height: normal;
	 	 	 	 	 	 	 	 font-size: 10pt;
	 	 	 	 	 	 	 	 background-color: rgb(205, 149, 141);
	 	 	 	 	 	 	 	 margin-bottom: 2px;
	 	 	 	 	 	 	 	}
	 	 	 </style>
	 	</head>
	 	<body>
	 	 	 <div class="a">This div element has a line-height set as 2inches.</div> 		
	 	 	 <div class="b">This div element has a line-height set as 100px.</div>
	 	 	 <div class="c">This div element has a line-height set as number 5.</div>
	 	 	 <div class="d">This div element has a line-height set as normal.</div>
	 	</body>
</html>
<< CSS - line-break 属性 CSS - list-style 属性 >>