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.
max-width: none | length | initial | 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.
We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.Ok