Box Model: Width and Height
Category: Web Development & Approved by devanshchakravarti83@gmail.com 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.
Example:
“Global value”
width: intital;
width: inherit;
width: unset;
“Global value”
width: auto;
width: min-content;
width: max-content;
width: fit-content;
“Length”
width: 50px;
width: 5em;
“Percentage”
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