December 3, 2022

How to Give Vertical Space Between Multiple Div Elements using HTML and CSS

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.

HTML

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-1, .container-2, .container-3, and .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.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <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">
</head>

<body>
    <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>

</body>

</html>

CSS

We are selecting the h3 element selector and setting the text-transform property value to uppercase to get all capitalized letters in the h3 element.
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-1, .container-2, .container-3, and .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.

h3 {
    text-transform: uppercase;
}

div {
    height: 250px;
    width: 250px;
    color: white;
    text-transform: uppercase;
    font-size: 30px;
}

.container-1 {
    background: red;
}

.container-2 {
    background-color: yellowgreen;
}

.container-3 {
    background-color: green;
}

.container-4 {
    background-color: blue;
}

.container {
    margin-top: 25px;
}

You May Also Like: