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;
}