Box Model: max-width and min-width

Category: Web Development & Approved by devanshchakravarti83@gmail.com On February-06-2021 14:17:39

Box Model : max-width and min-width Property



With max-width property is used to set maximum width of the element’s. It is used to prevent width size should not to be more than max-width. The max-width override the width, but min-width override the max-width.
With min-width property is used to set minimum width of the element’s. It is used to prevent width size not to be less than min-width. The min-width override the both width andmax-width.

The max-width Its syntax is: max-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”
max-width: intital;
max-width: inherit;
max-width: unset;

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

“Length”
max-width: 50px;
max-width: 5em;

“Percentage”
max-width: 80%;

All the above values are similar for min-width property also.



Code Example:




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


Comments

Share your thoughts about this post
web counter