In this tutorial, you will learn how to give vertical space between multiple div elements using HTML and CSS. The div tag is also known as a division tag. The div element is most frequently used in web development to create specific sections for different types of data or functions in the webpage.
There are multiple ways to add vertical space between multiple div elements. The easiest way is to use break tags, but in this tutorial, we will make use of the CSS
margin-top property to give some vertical space between multiple div elements.
In the following example, we have multiple div elements and we will give some vertical space in between them. Please have a look over the code example and the steps given below.
- In the HTML file, we have multiple div elements and one h3 element with some text content.
- The first, second, third, and fourth div has class name of
.container-4, which we will use in the CSS file to give different background color to all the div elements.
- The second, third, and fourth div has the same class names of
.container, which we will use in the CSS file to give some vertical space in between them.
- In the head element, we have added a stylesheet (
style.css) using the link element.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vertical space between multiple divs</title>
<link rel="stylesheet" href="./style.css">
<h3>Vertical space between multiple divs</h3>
<div class="container-1">container one</div>
<div class="container container-2">container two</div>
<div class="container container-3">container three</div>
<div class="container container-4">container four</div>
- We are selecting the
h3 element selector and setting the
text-transform property value to uppercase to get all capitalized letters in the
- We are selecting all the
div elements using the element selector and setting the
height property value to 250px,
width property value to 250px,
color property value to white,
font-size property value to 30px, and
text-transform property value to uppercase. As a result, we will have the same height and width divs with white-colored text.
- We are individually selecting each div element by using the class name of
.container-4 and setting the
background-color property value to red, yellowgreen, green, and blue to have different background colors.
- Lastly, we are selecting the second, third, and fourth div using the same class name of
.container and setting the
margin-top property value to 25px. As a result, we will have some vertical space between multiple div elements.