CSS max-width property

Sometimes it is useful to limit the element's width to a certain range. There are two properties max-width and min-width used to set the maximum and minimum width of the element.

The max-width property in CSS is used to set the maximum width of the element's content box. It means that the width of the content box can be smaller than the max-width value, but cannot be greater. It sets the upper bound on the element's width.

When the content is larger than the maximum width, then it will automatically change the height of the element. If the content is smaller than the max-width, this property has no effect. This property ensures that the value of width property cannot be greater than the value of max-width property. It does not allow negative values.

Syntax

The values of this CSS property are defined as follows.

none: It is the default value that does not limit the width of the content box.

length: This value defines the length of max-width in px, cm, pt, etc.

initial: It sets the property to its default value.

inherit: It inherits the property from its parent element.

Now, let's see an example of this CSS property.

Example

In this example, there are four paragraph elements with the content. We are defining the maximum-width of these paragraphs using the length value of max-width property. The maximum width of the first paragraph is 175px, the second paragraph is 20em, the third paragraph is 350pt, and the fourth paragraph is 10cm.

The content of the first paragraph is larger than the value of max-width property, so in the output, we can see that the height of the first paragraph changed automatically.

Output