W3docs
en
Log in

How to Control the Width of the <label> Tag

Since the <label> tag is an inline element, using the width property won’t have any effect. Here you can find some methods of adding width to the <label> tag.

Tags

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 <span class="property">width</span> property.

Create HTML

  • Use a <form> element.
  • Place the <label> tag with the <span class="attribute">for</span> attribute and the <input> tag with the <span class="attribute">id</span>, <span class="attribute">name</span>, and <span class="attribute">type</span> attributes inside the <form> element.

Example with display: block

<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.

CSS Rules

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

Full Example

<!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

<div class="demo px-2.5 mt-1 mb-2.5"> <form> <label for="name">Enter your name:</label> <input id="name" name="name" type="text"> </form> </div>

Note: Using display: block makes the label take up the full available width, pushing the input field to the next line. If you prefer the label and input to stay on the same line while still respecting the width, use display: inline-block instead.

Example with display: inline-block

<!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>
Try it Yourself »