How to Set the Width of the label Tag using CSS?

The <label> tag is used to specify a text label for an <input> element. But the problem with the <label> tag is that it is an inline element by default. Therefore, you can not control its width and height.

So, if you want to set the width of the <label> tag, you have to either make it a block or inline-block element first. This we can easily do with the display property.

In the following example, we have first made the <label> tag an inline-block element by specifying display: inline-block; and then set its width to 100px.

Example:

label{
    display: inline-block;
    width: 100px;
}

If you want to keep the <label> and the <input> element both in two different lines, use display: block;. When we apply display: block; on an element, the element takes up the full width of its parent container.

See this example:

Example:

label{
    display: block;
    height: 25px;
}

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.

    View all posts