How to give space between a label and input field in HTML & CSS?

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 &nbsp; space character.

The &nbsp; 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 &nbsp; characters between the label and the input to give a small space between them:

Example:

<label>Name:</label>&nbsp;&nbsp;
<input placeholder="Enter your name">

Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.