How to Control the Width of the <label> Tag

The <label> element specifies a text label for the <input> tag. Since it is an inline element, using the width property alone won’t have any effect. But there are some methods to add width to the <label> tag.

In this tutorial, we’ll demonstrate some examples of controlling the width of the <label> tag by using the display property set to “block” in combination with the width property.

Watch a video course CSS - The Complete Guide (incl. Flexbox, Grid & Sass)

Create HTML

Usa a <form> element.
Place the <label> tag with the for attribute and the <input> tag with the id, name, and type attributes inside the <form> element.

<form>
  <label for="name">Enter your  name:</label>
  <input id="name" name="name" type="text" />
</form>

Add CSS

Set the display to “block”.
Specify the width.

label {
  display: block;
  width: 130px;
}

Example of adding width to the <label> tag using the "block" value of the display property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      label {
        display: block;
        width: 130px;
      }
    </style>
  </head>
  <body>
    <form>
      <label for="name">Enter your name:</label>
      <input id="name" name="name" type="text" />
    </form>
  </body>
</html>

Try it Yourself »

Result

Let’s see another example where we use the display property set to “inline-block”.

Example of adding width to the <label> tag using the "inline-block" value of the display property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      label {
        display: inline-block;
        width: 150px;
      }
    </style>
  </head>
  <body>
    <form>
      <label for="name">Enter your name:</label>
      <input id="name" name="name" type="text" />
    </form>
  </body>
</html>