How to set the distance between two divs in HTML with the help of CSS?

In this tutorial, you will learn about how to set spacing or distance between two <div> elements in HTML with the help of some CSS attributes.

The necessity of spacing between divs is highly apparent when designing pages, requiring a structured visual hierarchy. The language developers and maintenance team are continually looking at methods to provide quick and easy solutions to the programmers.

Definition and Characteristics

A div is a tag used in CSS to differentiate the different elements, which may include images, text content anchors, etc. or even a combination of these elements. As the name suggests, a div refers to a division within a web-page to be able to differentiate between the different types of content.

When formatting the content of our HTML document, we can set divs into rows and column classes. These are created to ensure good visual structure and hierarchy. It makes the usage and readability of the content much better.

So now we define each of our divs using ‘row’ or ‘col’ classes. This makes it easier for us to separate different sections of content.

How to set the distance between two divs

Setting the distance is pretty straight-forward, to be honest. It only includes the usage of a widely used CSS margin properties. Now, if the divs are meant to be one on top of the other, then the distance that can be set between them is vertical and can be done by either adding to margin-bottom to the top div or adding to margin-top of the second div as follows:

.div-top{
    margin-bottom: 30px;
}

.div-bottom{
    margin-top: 25px;
}

In the case where the divs are two column-types and need to be placed beside each other, the same concept follows, the only difference being that ‘margin-left’ and ‘margin-right’ attributes are used.

.div-left{
    margin-right: 30px;
}

.div-right{
    marign-left: 25px;
}

I hope this tutorial has helped you to understand how to set the distance between two divs. This should be able to give you the tools to make your web-page look even better.

You may also like:

Leave a Reply

Your email address will not be published. Required fields are marked *