In this tutorial, we will learn how to give vertical space between two text boxes in HTML and CSS. In HTML, a textbox is created using the input element. When you are creating a form, you may want to give some vertical space between two text boxes for the sake of good user interface and user experience.
There are multiple ways to give vertical space between two text boxes. The simplest way is to use a bunch of break tags, but it might mess up your form layout. So in this tutorial, we will follow a different approach and utilize
margin-top property. We will also use flexbox to make sure both the input and label elements are perfectly aligned.
In the following example, we will have two text boxes and we will add some vertical spacing in between them. Please have a look over the code example and the steps given below.
- In the HTML file, we have 3 elements (
div element is just a wrapper for the rest of the elements.
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.
input element specifies an input field where the user can enter data and both the input and label elements have been wrapped with a
- The second div has an id name of
#space which we will use in the CSS file to add vertical space between the both the
- 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>Space between two text boxes </title>
<link rel="stylesheet" href="style.css">
<input type="text" name="name">
<input type="email" name="email">
- We are selecting all the
div elements and using the
display property and setting the value to flex,
justify-content property value to flex-start, and setting the
width value to 250px. As a result, we will get perfectly aligned text boxes.
- We are selecting the label and using the
flex-grow property and setting the value to 1. The flex-grow property specifies how much an item will grow compared to other items inside a container.
- Lastly, we are selecting the last div using the id
#space and setting the
margin-top value to 15px. As a result, the text boxes will have some vertical space between them.