- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to make an empty div take space?
HTML is one of the most popular language to create interactive web pages. The space inside the div tag is marked by either enclosing it with a border or coloring it up. First, the method is given where the height and width are specified for the div tag to create the empty area. In the second example, the pre tags are used with line-height numbers, within the div tags to create the empty space. In the third example, the <br> tags are used with line-height numbers, within the div tags.
Example 1: By using height and width values
Step 1 − Make an HTML file and start writing the code.
Step 2 − Make a <center> tag within the <body> tag.
Step 3 − Now within the <center> tag, make a tag with the class name “emptySpaceColored”.
Step 4 − Make a <style> tag within the head tag and specify the style for .emptySpaceColored. Use 200px as height and 200px as width. Also, specify the background-color value.
Step 5 − Now within the <center> tag, make another <div> tag with the class name “emptySpaceBordered”.
Step 6 − Specify the style for .emptySpaceBordered. Use 200px as height and 200px as width. Also, specify the border as 2px solid with some color.
Step 7 − Open html file in a browser and check the result.
Code For emptySpace1.html
File Used: 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>
Example 2: By using <pre> tag
Step 1 − Create an HTML file to write the code.
Step 2 −Specify a <center> tag within the <body> tag.
Step 3 − And then inside the <center> tag, define a <div> tag with the class name “emptySpaceBorder”.
Step 4 − Define a <style> tag within the head tag and specify the style for . emptySpaceBorder. Within this, specify the border as 2px solid with some dark color.
Step 5 − Now within the <div> tag, make a
tag with class style specification as "line-height:10;".
Step 6 − Open html file in a browser and check the result.
Code For emptySpace2.html
File Used : 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>
Example 3: By using <br> tag
Step 1 − Create an HTML file and start writing the code.
Step 2 − Now within the <center> tag, make a
tag with class name as “emptySpaceBorder”.Step 3 − Make a <style> tag within the head tag and specify the style for .emptySpaceBorder. Within this, specify the border as 2px solid with some dark color.
Step 4 − Now within the <div> tag, make a tag with class style specification as "line-height:15;".
Step 5 − Open html file in a browser and check the result.
Code For emptySpace3.html
File Used : 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>
Conclusion
In this HTML article, using three different examples, the ways to show how to create the space in a div tag, are given. In the first example, the height and width of the div tag are set to make the space. In the second example, the space in the div tag is created by using empty pre-tags with line-height numbers. In example three, the space in the div tag is created by using tags with line-height numbers.
1K+ Views
