Open In App

How to make an empty div take space ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn how to make an empty div take space using CSS.

Approach: The solution is to give some height (or min-height) and width (or min-width) to your HTML div. When you set a particular height and width for a div, it does not matter if it is empty or overflowed, it will only take up the space as given in the code.

Example: In the following code, the empty space is achieved by giving a height of 200px and a width of 400px.

HTML




<!DOCTYPE html>
<html>
<head>
    <style>
        .box{
          width: 400px;
          height: 200px;
          border: 2px black solid;
        }
    </style>
</head>
  
<body>
   <h2 style="color:green">GeeksforGeeks</h2>
   <b>
<p>Empty space around div</p>
</b><br/>
   <div class="box"></div>
</body>
</html>


Output:       

 


Last Updated : 06 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads