line-height CSS 属性用于设置多行元素的空间量，如多行文本的间距。对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非代替的 inline 元素，它用于计算行盒（line box）的高度。
一般情况下，浏览器默认的line-height为1.2。可以自定义 line-height 覆盖这个初始值，那么该怎样设置line-height呢？有以下5种方式：
- normal 默认。
- 设置合理的行间距。 number 设置数字，此数字会与当前的字体尺寸相乘来设置行间距，即number为当前font-size的倍数。
- length 设置固定的行间距。
- % 基于当前字体尺寸的百分比行间距。
- inherit 规定应该从父元素继承 line-height 属性的值。
1、normal
取决于用户端。桌面浏览器（包括 Firefox）使用默认值，约为1.2，这取决于元素的 font-family。
2、<数字>
该属性的应用值是这个无单位数字<数字>乘以该元素的字体大小。计算值与指定值相同。大多数情况下，这是设置line-height的推荐方法，不会在继承时产生不确定的结果。
3、<长度>
指定<长度>用于计算 line box 的高度。参考<长度>了解可使用的单位。以 em 为单位的值可能会产生不确定的结果（见下面的例子）。
4、<百分比>
与元素自身的字体大小有关。计算值是给定的百分比值乘以元素计算出的字体大小。百分比值可能会带来不确定的结果（见下面第二个例子）。
5、-moz-block-height Non-Standard
将行高设置为当前块的内容区域高度。
模拟题： 修改诗歌行高
描述
您需要在 style.css 文件中实现如下功能
.para1的行高为40px.para2的行高为2em，文字大小为20px.para3的行高是文字大小的 2 倍.para4的行高为12px
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<link rel="stylesheet" href="./common.css">
<title>Sonnet</title>
</head>
<body>
<p class="para1">thy eternal summer shall not fade</p>
<p class="para2">Nor lose possession of that fair thou owest;</p>
<p class="para3">Nor shall death brag thou wander'st in his shade,</p>
<p class="para4">When in eternal lines to time thou growest:<br>So long as men can breathe or eyes can see,<br>So long lives this and this gives life to thee.</p>
</body>
</html>样式css：
公共部分——common.css：
p {
background-color: antiquewhite;
margin: 10px;
font-size: 16px;
}作答部分——style.css：
.para1{
line-height: 40px;
}
.para2{
line-height: 2em;
font-size: 20px;
}.para3{
line-height: 200%;/* 或者写成line-height:1; */
}
.para4{
line-height: 12px;
}
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
