如何更改br標籤的高度？-html教學-PHP中文網

如何更改br標籤的高度？

WBOY

發布： 2023-09-11 17:29:02

轉載

994 人瀏覽過

如何更改br標籤的高度？

標籤是常用的 HTML 元素，用於在 Web 內容中新增換行符號。然而，有時，行不連續性的預先存在的高度可能被認為是不夠的，因此需要增大書面材料的連續行之間的間隙。在本次討論中，我們將探索修改
標籤高度的各種方法，包括使用 CSS line-height 屬性和新增輔助換行元素。無論您是初級還是熟練的 Web 開發人員，本手冊都將使您全面了解如何調整網頁設計中
標籤的高度。

方法

我們將看到兩種不同的方法來明顯改變 br 標籤的高度。它們如下 -

使用 CSS line-height 屬性
新增額外的換行符號

方法一：使用CSS line-height屬性

修改換行符高度的標準技術是利用稱為 line-height 的 CSS 屬性。此屬性用於調整文字行的高度，也可以用在
標記的父元素上以擴大行與行之間的間隙。

此程式碼區塊呈現一個 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：新增額外的換行符號

更改換行符高度的另一種方法是新增額外的
標記。這將在文字行之間創建更多空間，當 line-height 屬性不夠時特別有用。

範例

下面的程式碼是一個毫不費力的指令序列。可以看出，使用了大量的
標籤來增強
標籤在書寫或印刷的連續兩行之間的垂直跨度的可感知性.

<!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>

登入後複製