In this tutorial, you will learn how to give vertical space between two div elements using HTML and CSS. The div tag is also known as a division tag, which is most frequently used in HTML to make divisions of content in the webpage. The div tag has both opening and closing tags.
There are multiple ways to add vertical space between two div elements. The simplest way is to use break tags, but in this tutorial, we will utilize the
margin-top property to give some vertical space between two div elements.
In the following example, we have two 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 2
div elements with some text content.
- The first div has a class name of
.container-1 and the second div has a class name of
.container-2, which we will use in the CSS file to give different background colors to both div elements and 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 two divs</title>
<link rel="stylesheet" href="./style.css">
<div class="container-1">container one</div>
<div class="container-2">container two</div>
- We are selecting all the div elements using the element selector and setting the
height property value to 200px,
width property value to 200px,
color property value to white,
font-size property value to 1.5rem, 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 selecting the first div using the class name
.container-1 and setting the
background property value to red to get a red color background div.
- Lastly, we are selecting the second div using the class name
.container-2 and setting the
background property value to green and
margin-top property value to 3rem. As a result, we will get a green color background div and have some vertical space between two div elements.