📌  相关文章
📜  HTML | DOM 样式 lineHeight 属性(1)

📅  最后修改于: 2023-12-03 14:41:50.081000             🧑  作者: Mango

HTML | DOM 样式 lineHeight 属性

简介

lineHeight 属性用于设置行高。行高是行框的高度，包含任何行框中的顶部和底部留白（如果存在）。默认值是 normal。

使用方法

可以在 CSS 中使用 line-height 进行设置：

/* 设置具体数值 */
line-height: 1.5;
/* 设置百分比 */
line-height: 150%;
/* 设置倍数 */
line-height: 1.5em;

可以在 HTML 中使用 style 属性进行设置：

<p style="line-height:1.5;">这是一段文字</p>

也可以在 CSS 中使用 inherit、initial、unset 进行设置：

line-height: inherit; /* 从父元素继承值 */
line-height: initial; /* 设置为默认值 */
line-height: unset; /* 继承父元素值；如果没有则设置为初始值 */
示例

下面是一个简单的示例，演示了如何使用 line-height 设置行高：

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 设置段落行高为 1.5 */
    p {
      line-height: 1.5;
    }
  </style>
</head>
<body>

  <h1>HTML | DOM 样式 lineHeight 属性</h1>

  <p>这是一段文字，行高为 1.5</p>
  <p style="line-height:2;">这是一段文字，行高为 2</p>

</body>
</html>
注意事项
  • 行高一般与字体大小挂钩，需要根据具体情况设置。
  • 如果设置为数值，建议使用小数点（如 1.5）而不是分数（如 3/2）。
  • 如果没有指定行高，行高通常会继承父元素设置的行高值。如果父元素也没有设置行高，则行高会根据浏览器的默认设置而定。

参考链接：http://www.w3school.com.cn/cssref/pr_dim_line-height.asp