The max-width property in CSS defines the maximum width an element can occupy, ensuring that it doesn't exceed a specified width. This property plays a crucial role in responsive design, allowing the content to adjust within a defined limit. It helps in creating flexible layouts that look great on various screen sizes.
Syntax
max-width: none | length | percentage (%) | initial | inherit;
Property Values
All the properties are described well in the example below.
| Value | Description |
|---|
| none | Default value without setting a maximum width. |
| length | Sets the maximum width using a specific length unit like pixels (px), centimeters (cm), etc. |
| percentage | Sets the maximum width as a percentage of the containing element's width. |
| initial | Sets the property to its default value. |
| inherit | Inherits the property value from its parent element. |
Examples of Using max-width
Example 1: Using max-width with none
In this example, the max-width property is set to none, allowing the paragraphs to expand without any restriction on width.
HTML <!DOCTYPE html> <html> <head> <title>max-width property</title> <!-- max-width CSS property --> <style> p { max-width: none; color: white; background-color: green; } </style> </head> <body> <p> GeeksforGeeks: A computer science portal </p> </body> </html> Output:
Example 2: Using max-width with length
Here, we set the maximum width to a specific length (300px) to prevent the paragraph from growing wider than that value.
HTML <!DOCTYPE html> <html> <head> <title>max-width property</title> <!-- max-width CSS property --> <style> p { max-width: 110px; color: white; background-color: green; } </style> </head> <body> <p> GeeksforGeeks: A computer science portal </p> </body> </html> Output:
Example 3: Using max-width with Percentage
In this example, the maximum width is set as a percentage of the parent container’s width, making the element flexible.
HTML <!DOCTYPE html> <html> <head> <title>max-width property</title> <!-- max-width CSS property --> <style> p { max-width: 20%; color: white; background-color: green; } </style> </head> <body> <p> GeeksforGeeks: A computer science portal </p> </body> </html> Output:
Example 4: Using max-width with initial
This example demonstrates resetting the max-width property to its initial (default) value using initial.
HTML <!DOCTYPE html> <html> <head> <title>max-width property</title> <!-- max-width CSS property --> <style> p { max-width: initial; color: white; background-color: green; } </style> </head> <body> <p> GeeksforGeeks: A computer science portal </p> </body> </html> Output:
Example 5: Using max-width with inherit
In this example, the max-width value is inherited from the parent element, making the child element follow the same width constraints as its parent.
HTML <!DOCTYPE html> <html> <head> <title>max-width property</title> <!-- max-width CSS property --> <style> .container { max-width: inherit; color: white; background-color: green; } </style> </head> <body> <div class="container"> <p> GeeksforGeeks: A computer science portal </p> </div> </body> </html> Output:
Understanding and using the max-width property in CSS is essential for responsive design. It controls elements' maximum width, ensuring correct content display across all viewports, enhancing CSS skills, and creating adaptable, user-friendly layouts.
Supported Browsers: The browser supported by the max-width property are listed below: