数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使空的 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 标签中创建空间。
4K+ 浏览量
