The label and input elements are inline-level elements in HTML. Therefore, they do not start on a new line and only take up as much space as necessary.
There could be several approaches to give space between them, but the easiest approach is to apply margin-left or margin-right properties on them.
You can either apply margin-right on the <label> tag, or margin-left on the <input> element.
See the following example, where we have put a space of 20px between the label and input elements using the margin-right property:
Example:
label{
margin-right: 20px;
}
The similar 20px space you can also put by applying margin-left on the input element.
See the following example:
Example:
input{
margin-left: 20px;
}
Give space using the space character
If you don’t want to write any external CSS to put the space between the label and input, an alternative solution would be to use space character.
The or the non-breaking space is an empty space which does not break into a new line on word wrap. However, it is only used when you want to give a very small space between two elements.
See the following example where we have put two characters between the label and the input to give a small space between them:
Example:
<label>Name:</label> <input placeholder="Enter your name">
