The max-width property is used to define the maximum width of an element.
The value of the width cannot be larger than the value by maximum width. If the content is larger then it will go to the next line and if the content is smaller than maximum width then it has no effect. This maximum width property does not include padding, borders, or margins.
You can define maximum width values in percentage or length. Also, the values are none, initial, or inherit.
- none: It is the default value and it does not contains maximum width.
- length: This property is used to set the length of maximum width. The length can be add in form of px, cm etc. Negative length values are not allowed.
- percentage (%): This property is used to set the maximum width in form of percentage. Negative percentage values are not allowed.
- initial: It is used to set maximum width property to its default value.
- inherit: This property is inherited from its parent. The child element takes the computed value of its parent element max-width property.
Example:
The following example shows the difference between width and maximum width property.
Note:
- The content area of an element is inside the padding, border, and margin of the element.
- The CSS maximum width property applies to block level and replaced elements.
- The CSS maximum width property is used to prevent the CSS width from becoming larger than the value specified in the CSS max-width property.
- If the value is provided as a percentage, it is relative to the width of the containing block.
- The maximum width property applied to all the HTML elements except non-replaced inline elements and table elements.