November 18, 2022

How to Add Vertical Space Between Multiple Text Boxes in HTML and CSS

In this tutorial, you will learn how to add vertical space between multiple text boxes in HTML and CSS. An HTML text box is an area where the user can enter the text input. For a good user interface and user experience, you should leave some vertical space between text boxes while constructing forms.

There are several methods for providing vertical space between text boxes. The simplest method is to use a bunch of break tags. However, in this article, we will use the CSS margin-top property to add vertical spaces between text boxes. To ensure that the input and label elements are both exactly aligned, we are utilizing CSS flexbox.

In the following example, we have multiple text boxes 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 multiple elements such as div, input, and label.
The label element is used to specify a label for an input field. The value of for attribute is set to the name of the corresponding input field.

All the input and label elements have been wrapped in a div. The input element designates an input area where the user can enter data.
The second, third, and fourth div has the same class name of .space, which we will use in the CSS file to give vertical space between the multiple text boxes.
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>Spaces between multiple text boxes</title>
    <link rel="stylesheet" href="./style.css">
</head>

<body>
    <div>
        <label for="firstname">First Name:</label>
        <input type="text" name="firstname">
    </div>
    <div class="space">
        <label for="lastname">Last Name:</label>
        <input type="text" name="Lastname">
    </div>
    <div class="space">
        <label for="email">Email:</label>
        <input type="email" name="email">
    </div>
    <div class="space">
        <label for="age">Age:</label>
        <input type="age" name="age">
    </div>
</body>

</html>

CSS

We are selecting all the div elements and using display property and setting the value to flex, justify-content property value to flex-start, and setting the width value to 300px. As a result, we will get perfectly aligned text boxes.
We are selecting all the label elements and using flex-grow property and setting the value to 1. The flex-grow property specifies how much the item will grow compared to other items inside that container.

Lastly, we are selecting the second, third, and fourth div using the class name (.space) and setting the margin-top value to 20px. As a result, the text boxes will get some vertical space between them.

div {
    display: flex;
    justify-content: flex-start;
    width: 300px;
}

label {
    flex-grow: 1;
}

.space {
    margin-top: 20px;
}

You May Also Like: