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