CSS 如何更改br标记的高度

br标记是一种常用的HTML元素，在网页内容中添加换行。然而，有时候已经存在的行间间隔高度可能被认为是不足的，因此需要增加连续的文本行之间的间隔。在本文中，我们将探讨修改br标记高度的各种方法，包括使用CSS的line-height属性和添加额外的换行元素。无论您是一个初学者还是一个熟练的网页开发者，本指南都将为您提供全面的了解如何在您的网页设计中调整br标记的高度。

方法

我们将使用两种不同的方法来似乎改变br标记的高度。它们如下：

使用CSS的line-height属性
添加额外的换行

方法1：使用CSS的line-height属性

修改换行符高度的标准方法是使用line-height属性。该属性用于调整文本行的高度，并且也可应用于br标记的父元素以扩大行间距。

以下代码块展示了一个包含标题（表示要完成的任务）和一个段落元素的HTML文档，段落内容包含两行文本，使用了br标记将它们分隔开来。应用于这个段落元素的CSS样式指定了line-height为3，这导致文本行之间的垂直间距是常规行高的三倍。

示例

以下是我们将在本示例中使用的最终代码：

<!DOCTYPE html>
<html>
<head>
   <title>How to change the height of br tag?</title>
   <style>
      p {
         line-height: 3;
      }
   </style>
</head>
<body>
   <h4>How to change the height of br tag?</h4>
   <p>
      This is some text in line 1.
      <br>
      This is some text in line 2.
   </p>
</body>
</html>

方法2：添加额外的换行

改变换行高度的另一种方法是添加额外的 标签。这将在文本行之间创建更多的空间，特别是当行高属性不足时非常有用。

示例

以下代码是一个轻松精心编排的指令序列。可以看出，大量的 标签被用来增加 标签在连续两行文字或印刷物之间的垂直跨度的可视性。

<!DOCTYPE html>
<html>
<head>
   <title>How to change the height of br tag?</title>
</head>
<body>
   <h4>How to change the height of br tag?</h4>
   <p>
      This is some text in line 1.
      <br><br><br>
      This is some text in line 2.
   </p>
</body>
</html>