如何使空的 div 佔據空間?


HTML 是建立互動式網頁最流行的語言之一。div 標籤內部的空間可以透過在其周圍新增邊框或填充顏色來標記。首先,給出了一個方法,其中為 div 標籤指定了高度和寬度以建立空白區域。在第二個示例中,pre 標籤與行高數字一起在 div 標籤內使用以建立空白空間。在第三個示例中,<br> 標籤與行高數字一起在 div 標籤內使用。

示例 1:使用高度和寬度值

  • 步驟 1 - 建立一個 HTML 檔案並開始編寫程式碼。

  • 步驟 2 - 在 <body> 標籤內建立一個 <center> 標籤。

  • 步驟 3 - 現在在 <center> 標籤內,建立一個 帶有類名“emptySpaceColored”的標籤。

  • 步驟 4 - 在 head 標籤內建立一個 <style> 標籤,併為 .emptySpaceColored 指定樣式。使用 200px 作為高度和 200px 作為寬度。還可以指定背景顏色值。

  • 步驟 5 - 現在在 <center> 標籤內,建立另一個帶有類名“emptySpaceBordered”的 <div> 標籤。

  • 步驟 6 - 為 .emptySpaceBordered 指定樣式。使用 200px 作為高度和 200px 作為寬度。還可以指定邊框為 2px 實線,並使用某種顏色。

  • 步驟 7 - 在瀏覽器中開啟 html 檔案並檢查結果。

emptySpace1.html 的程式碼

使用的檔案:emptySpace1.html

<!DOCTYPE html>
<html>
<head>
   <style>
      .emptySpaceColored {
         height: 200px;
         width: 200px;
         background-color: rgb(217, 225, 230);
      }
      .emptySpaceBordered {
         height: 200px;
         width: 200px;
         border: 2px solid rgb(10, 2, 29);
      }
   </style>
</head>
<body>
   <center>
      <h2>Create Empty Space in Div Tag - Method 1</h2>
      <h4>Empty Space in Div Tag - Colored</h4>
      <div class="emptySpaceColored"></div>
      <h4>Empty Space in Div Tag - With Border</h4>
      <div class="emptySpaceBordered"></div>
   </center>
</body>
</html> 

示例 2:使用 <pre> 標籤

  • 步驟 1 - 建立一個 HTML 檔案來編寫程式碼。

  • 步驟 2 - 在 <body> 標籤內指定一個 <center> 標籤。

  • 步驟 3 - 然後在 <center> 標籤內,定義一個帶有類名“emptySpaceBorder”的 <div> 標籤。

  • 步驟 4 - 在 head 標籤內定義一個 <style> 標籤,併為 .emptySpaceBorder 指定樣式。在此處,將邊框指定為 2px 實線,並使用某種深色。

  • 步驟 5 - 現在在 <div> 標籤內,建立一個

 tag with class style specification as "line-height:10;".

  • 步驟 6 - 在瀏覽器中開啟 html 檔案並檢查結果。

emptySpace2.html 的程式碼

使用的檔案:emptySpace2.html

<!DOCTYPE html>
<html>
<head>
   <style>
      .emptySpaceBorder {
         border: 2px solid rgb(46, 6, 138);
      }
   </style>
</head>
<body>
   <center>
      <h2>Create Empty Space in Div Tag - Method 2</h2>
      <h4>Using Pre tag</h4>
      <div class="emptySpaceBorder">
         <pre style="line-height:10;"> </pre>      
      </div>        
   </center>
</body>
</html>  

示例 3:使用 <br> 標籤

  • 步驟 1 - 建立一個 HTML 檔案並開始編寫程式碼。

  • 步驟 2 - 現在在 <center> 標籤內,建立一個

    類名為“emptySpaceBorder”的標籤。

  • 步驟 3 - 在 head 標籤內建立一個 <style> 標籤,併為 .emptySpaceBorder 指定樣式。在此處,將邊框指定為 2px 實線,並使用某種深色。

  • 步驟 4 - 現在在 <div> 標籤內,建立一個具有類樣式規範“line-height:15;”的標籤。

  • 步驟 5 - 在瀏覽器中開啟 html 檔案並檢查結果。

emptySpace3.html 的程式碼

使用的檔案:emptySpace3.html

<!DOCTYPE html>
<html>
<head>
   <style>
      .emptySpaceBorder {
         border: 2px solid rgb(10, 2, 29);
      }
   </style>
</head>
<body>
   <center>
      <h2>Create Empty Space in Div Tag - Method 3</h2>
      <h4>Using BR tag</h4>
      <div class="emptySpaceBorder">
         <br style="line-height:15;" />   
      </div>  
   </center>
</body>
</html>   

結論

在這篇 HTML 文章中,透過三個不同的示例,給出瞭如何建立 div 標籤內空間的方法。在第一個示例中,設定 div 標籤的高度和寬度以建立空間。在第二個示例中,透過使用帶有行高數字的空 pre 標籤在 div 標籤中建立空間。在示例三中,透過使用帶有行高數字的標籤在 div 標籤中建立空間。

更新於: 2023年5月10日

4K+ 瀏覽量

啟動你的 職業生涯

透過完成課程獲得認證

開始學習
廣告