Set Widht Height Label HTML CSS

By Posted on

CSS for Label Custom

In this article I will share a guide on how to Set Widht Height Label of html labels using CSS.

Label is one of the HTML tags to define a label and its default is inline. The width of label will depend on the number of words inside it.

To change or set the width of the label, we must specify how wide it is and change the display type to inline-block.

Set Widht Label

To create a width of a certain size on the label, you only need to use the following CSS code: 

<style>
    label {
        width: 80px;
        display: inline-block;
    }
</style>

Then all labels on your website will be 80px wide.

If you want the label to only change within a certain element class, please include the class before writing the label.

For example, in the website there are several elements.

We want to change the width of the label inside “container” class, so the format is as follows: 

<style>
    .container label {
        width: 80px;
        display: inline-block;
    }
</style>

Then you will see the result like this:

Set Widht Height Label HTML CSS

Set Height Label

Then how about making the label size height? You have to do is add the “width” property, for example the following code: 

<style>
    .container label {
        width: 80px;
        height: 40px;
        display: inline-block;
    }
</style>

Then the distance between one label and another will appear as shown in the following image:

Set Widht Height Label HTML CSS

If I add a background, like the following code: 

<style>
    .container label {
        width: 80px;
        height: 40px;
        display: inline-block;
        background-color: aliceblue;
    }
</style>

Then you will see the result like this:

Set Widht Height Label HTML CSS

Hopefully this Set Widht Height Label CSS article is useful.

May be you like:

> Multiple Input Form Add Button HTML + JQuery