如何让空的 div 占用空间?

htmlweb developmentfront end technology更新于 2024/6/19 19:56:17

HTML 是创建交互式网页最流行的语言之一。div 标签内的空间可以通过用边框或颜色标记来标记。首先，给出了指定 div 标签的高度和宽度来创建空白区域的方法。在第二个示例中，在 div 标签内使用 pre 标签和行高数字来创建空白区域。在第三个示例中，在 div 标签内使用 <br> 标签和行高数字。

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

步骤 1 − 创建 HTML 文件并开始编写代码。
步骤 2 − 在 <body> 内创建 <center> 标签标签。
步骤 3 − 现在在 <center> 标签内，创建一个标签，类名为"emptySpaceColored"。
步骤 4 − 在 head 标签内创建一个 <style> 标签，并指定 .emptySpaceColored 的样式。高度和宽度均为 200px。同时，指定 background-color 值。
步骤 5 − 现在在 <center> 标签内，创建另一个 <div>类名为"emptySpaceBordered"的标签。
步骤 6 - 指定 .emptySpaceBordered 的样式。高度和宽度均为 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>