November 23, 2022

How to Give Vertical Space Between Two Buttons in HTML and CSS

In this tutorial, you will learn how to give vertical space between two buttons in HTML and CSS. A clickable button on a website is made using the button element. The button element is used to carry out some kind of action on a website, like submitting or resetting a form. When you are creating button elements on a website, you may want to give some vertical space between them for a good user interface and user experience.

There are multiple ways to give vertical space between two buttons. The simplest way is to use break tags, but in this tutorial, we will utilize the margin-top property to give some space between two buttons.

In the following example, we will have two buttons and we will add some vertical spacing between them. Please have a look over the code example and the steps given below.

HTML

In the HTML file, we have 2 elements (div and button).
The first div element is a parent div for the rest of the elements, which has a class name of .parent, which we will use in the CSS file to center align the elements.

We have two button elements and both have been wrapped with a div.
The last child div has a class name of .reset, which we will use in the CSS file to add some vertical space between the two 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 two buttons</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div class="parent">
        <div>
            <button type="submit">Submit</button>
        </div>
        <div class="reset">
            <button type="reset">Reset</button>
        </div>
    </div>
</body>

</html>

CSS

We are selecting the parent div using the class name of .parent and setting the text-align property value to center to center align all the elements.
We are selecting the button element and setting the width property value to 100px. As a result, both buttons will have the same width.

Lastly, we are selecting the last child div using the class name of .reset and setting the margin-top value to 20px. As a result, the buttons will have some vertical space between them.

.parent {
    text-align: center;
}

button {
    width: 100px;
}

.reset {
    margin-top: 20px;
}

You May Also Like: