CSS 行距

CSS 行距属性控制文本行与行之间的距离。它也被称为行高。

设置 CSS 行距属性的语法

selector {
  line-height: value;
}

CSS 行距属性值的解释

值： <number> | <length> | <percentage> | normal | initial | inherit

• <number>：定义行高为当前字体尺寸的乘数。例如，如果当前字体为 16px，行高为 1.5，则行高为 24px（16px x 1.5）。
• <length>：定义行高为指定长度的值。例如，line-height: 24px; 会将行高设置为 24px。
• <percentage>：定义行高为指定元素字体尺寸的百分比。例如，line-height: 150%; 会将行高设置为 1.5 (150% / 100) 倍当前字体大小。
• normal：默认值，行高为当前字体尺寸的 1.2 倍。
• initial：设置属性为其默认值。
• inherit：从父元素继承该属性的值。

实例

p {
  line-height: 1.5; /* 将行高设置为当前字体大小的 1.5 倍 */
}

h1 {
  line-height: 36px; /* 将行高设置为 36 像素 */
}

h2 {
  line-height: 200%; /* 将行高设置为当前字体大小的 2 倍 */
}

结束语

CSS 行距是一个非常有用的属性，可用于控制文本可读性和外观。它可以与其他 CSS 属性结合使用，例如 font-size 和 margin，以实现所需的效果。建议在设计和开发网站时使用。