line-height属性的可用属性值

1.line-height: normal

默认值。文字会默认有一个合理的行间距。

2.line-height: number

属性值可以是一个数字，该数字与字体尺寸即font-size的值相乘作为行高。
示例

<body> <p>这里是一句用于测试的文字。</p> <style>     body,p{         margin: 0;         padding: 0;     }     p{         font-size: 16px;         line-height: 2;     } </style> </body>

css属性line-height的应用——单行文字上下居中
图1-可以看见最终p元素的行高为32px

3.line-height: length

可以设置一个具体固定的值（包含数值和单位）作为行高。
示例

<style>     body,p{         margin: 0;         padding: 0;     }     p{         font-size: 16px;         line-height: 28px;     } </style>

css属性line-height的应用——单行文字上下居中
图2-可以直接设置具体的行高

4.line-height: x%

可以设置基于当前字体尺寸的百分比作为行高，具体使用可看示例。
示例

<style>     body,p{         margin: 0;         padding: 0;     }     p{         font-size: 20px;         line-height: 90%;     } </style>

css属性line-height的应用——单行文字上下居中
图3-可以看出文字的行高等于font-size属性的值乘以90%

<style>     body,p{         margin: 0;         padding: 0;     }     p{         font-size: 20px;         line-height: 110%;     } </style>

css属性line-height的应用——单行文字上下居中
图4-再次测试，结果同图3

5.line-height: inherit

从父元素继承该属性，当父元素的该属性值是一个缩放比例时，子元素将继承该缩放比例而不是具体的数值。
注意： IE浏览器不支持该属性值。
示例

<body>     <div>         这是父元素内的文字内容。         <p>这是子元素内的文字内容。</p>     </div> <style>     body,div,p{         margin: 0;         padding: 0;     }     div{         font-size: 16px;         line-height: 2;     }     p{         font-size: 20px;         line-height: inherit;     } </style> </body>

css属性line-height的应用——单行文字上下居中
图5-子元素的行高是子元素font-size属性值和从父元素上继承的line-height属性值相乘得出的计算结果

图6-整个div的高度是父元素行高（16px*2=32px）加上子元素行高得出的计算结果，等于72px

应用场景

单行文字上下居中

想要让单行文字上下居中显示，只需设置元素的line-height属性值和height属性相等即可。
示例

<body> <p>这里是一句用于测试的文字。</p> <style>     body,p{         margin: 0;         padding: 0;     }     p{         background-color: #999999;         font-size: 16px;         height: 50px;     } </style> </body>

css属性line-height的应用——单行文字上下居中
图7-未设置line-height时文字的显示情况

<body> <p>这里是一句用于测试的文字。</p> <style>     body,p{         margin: 0;         padding: 0;     }     p{         background-color: #999999;         font-size: 16px;         height: 50px;         line-height: 50px;     } </style> </body>

css属性line-height的应用——单行文字上下居中
图8-设置line-height等于height后文字的显示情况