HTML中设置行高的属性是,line-height属性(行高标签用法)

line-height属性

1、line-height特点设置行间的距离(行高)，而行距离的尺寸分配是line-height与font-size的计算值之差(在CSS中成为“行距离”)分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容(文本+文本顶部+文本底部)的最小框便是行框(line-box)，

2、可能的值有：

注：行距离自动习惯行高的方法，最好用的是采用number数值的方法。

3、设置了line-height的行框line-box，具有的特性：

1)、笔直居中性：由上面对line-height定义可知，line-height是经过line-box行框表现的，而行框包含文本+文本顶部+文本底部，文本顶部和文本底部是line-height与font-size差值的一半，所以，line-box与文本共用中基线，这便是行高的笔直居中性。

单行文字的笔直居中对齐，将line-height特点设置为所需要的行框高度：

关于多行文本笔直居中对齐，只需要将行框内的多行文本转换为内敛元素，比如设置display:inline-height或inline，然后单独设置内敛元素的行距离，整个内敛元素就在行框内笔直居中对齐了：

注：经过line-height设置文本笔直对齐，假如设置元素笔直对齐，需运用vertical-align:middle;

2)、运用行高替代高度防止haslayout

在某些情形下，line-height可以和height交换，因为实现的作用一样。都能撑开一个高度，然而这两个css特点有一个较隐蔽的差异，便是运用height会使标签haslayout，而运用line-height则不会。曾经只有IE6的时分曾流行运用height铲除浮动，便是利用了IE下height使haslayout的特点。但有时分，haslayout并不需要，反而要防止。

读过我前面有关自习惯按钮文章的人可能会发现我运用了line-height替代了height，其原因在于：IE6，IE7下，相似inline-block特点的元素里假如有block特点的元素，假如该blockhaslayout，则该标签会突破外部inline-block的显现而宽度100%显现，从使按钮自习惯文字大小的作用失效，解决方法便是运用line-height替代height。

line-height属性行高标签用法

line-height属性定义及用法

在css中，line-height属性是使用来设置行高，即设置行间的距离。所以浏览器都支持该属性，但是任何的版本的InternetExplorer(包括IE8)都不支持属性值"inherit"；

说明

该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离；

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

原始数字值指定了一个缩放因子，后代元素会继承这个缩放因子而不是计算值；

line-height属性语法格式

css语法：line-height:normal/number/length/%/inherit;

JavaScript语法：object.style.lineHeight="2";

line-height属性值说明

normal：默认，设置合理的行间距；

number：设置数字，此数字会与当前的字体尺寸相乘来设置行间距；

length：设置固定的行间距；

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

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

实例：

cssline-height属性设置行高

.small{line-height:80%;}.big{line-height:180%;}

这是一个标准行高的段落。

这是一个标准行高的段落。
这是一个标准行高的段落。

这是一个更小行高的段落。

这是一个更小行高的段落。
这是一个更小行高的段落。

这是一个更大行高的段落。

这是一个更大行高的段落。
这是一个更大行高的段落。