Box Model: Width and Height

Category: Web Development & Approved by On February-05-2021 15:09:48

Box Model : Width and Height Property

With width property is used to set width of the element’s. It takes content area width by default. The min-width and max-width properties override the width property.
The width Its syntax is: width: <length> <percentage> value;
Values description:

  • <length>
    Width of the element is define in length as an absolute value.

  • <percentage>
    Defines the width as a percentage of the containing block's width.

  • auto
    Width is automatically defines by the browser for specified element.

  • min-content
    It is intrinsic minimum width. In other words, the minimum width that a content (a group of words) can have. It means the width of the biggest word in the content.

  • max-content
    The intrinsic preferred width. In other words, the maximum width that a content (a group of words) can have. It means the width of the content when all the words are arranged together in one line.

  • fit-content
    Use the available space but never less than the min-content and never more than the max-content.

Let see a syntax for all values of width-color property.
“Global value”
width: intital;
width: inherit;
width: unset;

“Global value”
width: auto;
width: min-content;
width: max-content;
width: fit-content;

width: 50px;
width: 5em;

width: 80%;

All the above values are similar for height property also.

Code Example:

We have made blog on CSS tutorial from basic, if you haven’t read them so Click Here


Share your thoughts about this post
web counter