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

Coding Challanges
C Programming Language
Daily Tech News/Updates
Web Development
Free Courses (Udemy)
Ethical Hacking and Cyber Security
Education

---

---

---

---

---