line-height
line-height CSS 属性在水平书写模式中设置行框的高度。在垂直书写模式中，它设置行框的宽度。它通常用于设置文本行之间的距离。在水平书写模式下的块级元素上，它指定元素内行框的首选高度；在非替换的内联元素上，它指定用于计算行框高度的高度。
试一试
line-height: normal;
line-height: 2.5;
line-height: 3em;
line-height: 150%;
line-height: 32px;
<section id="default-example">
<div class="transition-all" id="example-element">
Far out in the uncharted backwaters of the unfashionable end of the western
spiral arm of the Galaxy lies a small unregarded yellow sun.
</div>
</section>
#example-element {
font-family: "Georgia", serif;
max-width: 200px;
}
语法
/* Keyword value */
line-height: normal;
/* Unitless values: use this number multiplied
by the element's font size */
line-height: 3.5;
/* <length> values */
line-height: 3em;
/* <percentage> values */
line-height: 34%;
/* Global values */
line-height: inherit;
line-height: initial;
line-height: revert;
line-height: revert-layer;
line-height: unset;
line-height 属性可指定为以下任意一种值：
- 一个
<number> - 一个
<length> - 一个
<percentage> - 关键字
normal。
值
normal-
取决于用户代理。桌面浏览器（包括 Firefox）默认值约为
1.2，具体取决于元素的font-family。 <number>（无单位）-
使用的值是这个无单位的
<number>乘以元素本身的字体大小。计算值与指定的<number>相同。在大多数情况下，这是设置line-height的首选方式，可以避免由于继承而产生的意外结果。 <length>-
指定的
<length>用于计算行框高度。以 em 单位给定的值可能会产生意想不到的结果（请参阅下面的示例）。 <percentage>-
相对于元素本身的字体大小。计算值是此
<percentage>乘以元素的计算字体大小。百分比值可能会产生意想不到的结果（请参阅下面的第二个示例）。
无障碍
对于主要段落内容，line-height 至少使用 1.5 的值。这将有助于有弱视情况的人以及有认知障碍（如阅读障碍）的人。如果页面被放大以增加文本大小，使用无单位值可确保行高按比例缩放。
正式定义
| 初始值 | normal |
|---|---|
| 应用于 | 所有元素。也适用于 ::first-letter 和 ::first-line。 |
| 继承性 | 是 |
| 百分比 | 参考元素本身的字体大小 |
| 计算值 | 对于百分比和长度值，使用绝对长度，否则按指定值 |
| 动画类型 | 数字或长度 |
正式语法
line-height =
normal |
<number [0,∞]> |
<length-percentage [0,∞]>
<length-percentage> =
<length> |
<percentage>
示例
基本示例
/* All rules below have the same resultant line height */
/* number/unitless */
div {
line-height: 1.2;
font-size: 10pt;
}
/* length */
div {
line-height: 1.2em;
font-size: 10pt;
}
/* percentage */
div {
line-height: 120%;
font-size: 10pt;
}
/* font shorthand */
div {
font:
10pt/1.2 "Bitstream Charter",
"Georgia",
serif;
}
通常更方便使用如上所示的 font 简写来设置 line-height，但这需要同时指定 font-family 属性。
行高值优先使用无单位数字
此示例展示了为什么最好使用<number>值而不是<length>值。我们将使用两个<div>元素。第一个带有绿色边框的 div 使用无单位的 line-height 值。第二个带有红色边框的 div 使用以 em 为单位定义的 line-height 值。
HTML
<div class="box green">
<h1>Avoid unexpected results by using unitless line-height.</h1>
Length and percentage line-heights have poor inheritance behavior.
</div>
<div class="box red">
<h1>Avoid unexpected results by using unitless line-height.</h1>
Length and percentage line-heights have poor inheritance behavior
</div>
<!-- The first <h1> line-height is calculated from its own font-size (30px × 1.1) = 33px -->
<!-- The second <h1> line-height results from the red div's font-size (15px × 1.1) = 16.5px, probably not what you want -->
CSS
.green {
line-height: 1.1;
border: solid limegreen;
}
.red {
line-height: 1.1em;
border: solid red;
}
h1 {
font-size: 30px;
}
.box {
width: 18em;
display: inline-block;
vertical-align: top;
font-size: 15px;
}
结果
垂直书写模式下的行间距
line-height 属性可用于调整垂直书写模式下垂直行之间的间距。
.haiku {
border: 1px solid;
margin-bottom: 1rem;
padding: 0.5rem;
background-color: wheat;
writing-mode: vertical-rl;
}
.wide {
line-height: 2;
}
结果
规范
| 规范 |
|---|
| CSS 内联布局模块级别 3 # line-height-property |
浏览器兼容性
加载中…