November 23, 2022

How to Add Vertical Space Between Multiple Buttons in HTML and CSS

In this tutorial, you will learn how to add vertical space between multiple buttons in HTML and CSS. The button element is used to create a clickable button on a website. The action of submitting or resetting a form is carried out via the button element on a website. For a good user interface and user experience when designing button elements for a website, you might wish to leave some vertical space between them.

There are multiple ways to add vertical space between buttons. 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 buttons.

In the following example, we have a couple of buttons and we will add 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 3 elements (h1, div, and button).
The parent div element has a class name of .main, which we will use in the CSS file to center align the child elements.
The h1 is a heading tag with some text content.
We have multiple button elements and all the button elements have been wrapped with a div.
The second and third child div have the same class name of .vertical-space, which we will use in the CSS file to add some vertical space between the buttons.
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 buttons</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>

    <div class="main">
        <h1>Vertical space between multiple buttons</h1>
        <div>
            <button type="submit">Submit</button>
        </div>
        <div class="vertical-space">
            <button type="reset">Reset</button>
        </div>
        <div class="vertical-space">
            <button>Read More</button>
        </div>
    </div>
</body>

</html>

CSS

We are selecting the parent div using the class name of .main and setting the text-align property value to center to center align all the child elements.
We are selecting the button element and setting the width property value to 100px. As a result, all the buttons will have the same width.
Lastly, we are selecting the second and third child div using the class name of .vertical-space and setting the margin-top value to 20px. As a result, the buttons will have some vertical space between them.

.main {
    text-align: center;
}

button {
    width: 100px;
}

.vertical-space {
    margin-top: 20px;
}

You May Also Like: