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;
}
