如何使空的 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 標籤中建立空間。